sass入门

使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。


@extend   SASS中的继承
//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}</pre>
//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

上述的继承并不会去掉冗余的代码,结合 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。来看一个演示

//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}
//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}



从编译出来的 CSS 代码可以看出,通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果,也让你的代码变得更为干净。

混合宏,继承,占位符三者的优劣与选择

sass

 

插值  结合   混合宏和each   更好用

让一个top属性在不同的样式内进行使用

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}
//css
.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

实际使用的一些感受 2016/12/14
用scss进行了新的项目。进行大量的子代选择。大量的浪费了浏览器性能。

A.Google 资深web开发工程师Steve Souders一句话就可以概括:
1.id选择器(#myid)
2.类选择器(.myclassname)
3.标签选择器(div,h1,p)
4.相邻选择器(h1+p)
5.子选择器(ul < li)
6.后代选择器(li a)
7.通配符选择器(*)
8.属性选择器(a[rel=”external”])
9.伪类选择器(a:hover,li:nth-child)
上面九种选择器中ID选择器的效率是最高,而伪类选择器的效率则是最底
所有我们在写脚本时候尽量用id和class

使用方式不正确。
改进思路,依然使用原始的css在scss中进行编译,一些短小的层级较多的可使用scss的嵌套,方便自己整理css架构。
自定义变量很好用,便于后期修改,但是前端完成之后,和后台结合的过程中,依然会有一些html和css会进行修改,再使用css编译的话,不是很方便,
自认为应当再附加一个样式表,专门用于后期的修改项目,对之前的样式进行覆盖。
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注