sass使用入门

作者: 土豆碰上冰 | 来源:发表于2019-07-03 17:15 被阅读0次

sass使用入门

1、使用变量

1.1 变量声明：

$highlight-color: #F90;

1.2 变量引用:

.selected {
  border: 1px solid $highlight-color;
}
//编译后
.selected {
  border: 1px solid #F90;
}

1.3变量使用中划线还是下划线：

sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。

$link-color: blue;//中划线命名
a {
  color: $link_color;//下划线引用
}

2、嵌套规则

2.1 Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  #content aside { background-color: #EEE }
}

2.2 父选择器的标识符&

article a {
  color: blue;
  &:hover { color: red }
}

还有另外一种用法，例如：当用户在使用IE浏览器时，你会通过JavaScript在<body>标签上添加一个ie的类名，直接在ie的这个类名下添加样式

#content aside {
  color: red;
  body.ie & { color: green }
}
//编译之后
#content aside {color: red};
body.ie #content aside { color: green }

2.3 群组选择器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
nav, aside {
  a {color: blue}
}

2.4 子组合选择器和同层组合选择器：>、+和~

>: 后代选择器，选择匹配到的所有的后代元素
~: 而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。
+: ‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

2.5嵌套属性:

除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-style，border-width，border-color以及border-*等也是非常烦人的

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

3. 导入SASS文件

@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到 @import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。但是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

3-1. 使用SASS部分文件

sass有一个特殊的约定来命名sass文件，sass局部文件的文件名以 下划线 开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss 这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";

3-2. 默认变量值

使用sass的 !default 标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值

$fancybox-width: 400px !default;
.fancybox {
    width: $fancybox-width;
}

3-3. 原生的CSS导入

在下列三种情况下会生成 原生的CSS@import，尽管这会造成浏览器解析css时的额外下载：

被导入文件的名字以.css结尾；

被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；

被导入文件的名字是CSS的url()值。

4. 静默注释

sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
body {
  color /* 这块注释内容不会出现在生成的css中 */: #333;
  padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;
}

5. 混合器

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。
混合器使用 @mixin 标识符定义。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

然后就可以在你的样式表中通过 @include 来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

实际上，混合器太好用了，一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢

5-1. 何时使用混合器

判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-corners,fancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。例如rounded-corners，它描述了包含它的css规则最终的视觉样式，尤其是边框角的视觉样式

5-2. 混合器中的CSS规则

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
//引用代码
ul.plain {
  color: #444;
  @include no-bullets;
}
//生成代码
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

5-3. 给混合器mixin传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
//引用
a {
  @include link-colors(blue, red, green);
}

5-4. 默认参数值

@mixin button($background: green) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

6. 选择器继承

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;//通过@extend 继承.error的样式，而且不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承
  border-width: 3px;
}

6-1. 继承的高级用法

最常用的一种高级用法是继承一个html元素的样式,接下来的这段代码定义了一个名为disabled的类，样式修饰使它看上去像一个灰掉的超链接。通过继承a这一超链接元素来实现：

.disabled {
  color: gray;
  @extend a;
}

关于@extend有两个要点你应该知道。

跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。

继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

混合器本身不会引起css层叠的问题，因为混合器把样式直接放到了css规则中，而继承存在样式层叠的问题

7、@mixin和@extend该如何选择

.button {  
    background: green;  
}
@mixin button {  
    background-color: green;  
}
.button-1 {  
    @extend .button; //@extend方式
    @include button; //@mixin方式
}
.button-2 {  
    @extend .button; //@extend方式
    @include button; //@mixin方式
}
//使用@extend产生 DRY CSS风格的代码
.button, .button-1, .button-2 {  
    background: green;  
}
//使用@mixin的Sass编译出来的样子
.button {  
    background-color: green;  
}
.button-1 {  
    background-color: green;  
}
.button-2 {  
    background-color: green;  
}

对比结果

相同的样式片段在不同的选择器中重复多次，这也导致了编译出来的CSS不是DRY形式的。

这可能会暗示你应该一直使用@extend，但是@extend也有一些缺点。

@extend会增加选择器之间的联系，然后把他们堆在一起。

被继承的选择器和继承别人的选择器可能会在样式表的不同位置，这就导致维护困难，放置顺序，或者需要差异化的一些问题

@extend命令不够灵活。不能向它传递参数，它原本是啥样就是啥样。这里还有一些在@media中使用@extend的限制，比如，不能横跨多个@media指令使用@extend。

@mixin主要的优势就是它能够接受参数。如果想传递参数，你会很自然地选择@mixin而不是@extend。
如果没有任何参数，使用@extend来创造DRY应该是个不错的选择。不过要注意的是，使用gzip压缩过的文件可能会破坏代码中的DRY。
当文件很小的时候，编译完成代码中有重复的片段并不是一件坏事。不过如果源文件中存在这样的重复片段，会使得代码很难维护。使用@mixin会减少编译后文件中DRY式的代码。但是，如果gzip的算法对重复片段的优化工作做得比较好，那么编译后的代码不会变得肿胀。

@mixin会更强大，更灵活，它与gzip的组合跟@extend的主要优势相比，一点都不会逊色。

8、Sass的表达式和控制命令

8.1 if() 条件表达式

@mixin test($condition) {
    $color: if($condition, blue, red);
    color:$color
}
.firstClass {
    @include test(true);//blue
}
//@mixin
@mixin txt($weight) {
    color: white;
    @if $weight == bold { font-weight: bold;}
}
.txt2 {
    @include txt(bold);
}
//if else
@mixin txt($weight) {
    color: white;
    @if $weight == bold { font-weight: bold;}
    @else if $weight == light { font-weight: 100;}
    @else if $weight == heavy { font-weight: 900;}
    @else { font-weight: normal;}
}

8.2 @for for循环

@for 有两种使用方式：from start through end 和 from start to end，两者的区别在于，前者遍历的范围是 [start, end], 而后者的遍历范围是 [start, end-1]。在 @for 循环中使用一个固定变量来替代遍历到的元素。如果你想实现从大到小的遍历，只需让 start 大于 end 即可.

@for $i from 1 through 2 {
    .col-#{$i} { width: 100/2 * $i + %;}
}
//循环编译之后
.col-1 {
  width: 50%;
}
.col-2 {
  width: 100%;
}

8.3 @each循环便利list or map

@each 指令同样可以用于循环输出，和 @for 的差别在于，@each 通过遍历 list 或者 map 实现循环输出：

@each $usr in bob, john {
    .#{$usr}-avatar {
        background-image: url('/img/#{$usr}.png');
     }
}

@each 后面的 $usr 变量用于保存每次遍历到的元素，然后使用差值语法（#{var}）来拼接正确的图片路径，编译结果如下：

.bob-avatar {
    background-image: url("/img/bob.png");
}

.john-avatar {
    background-image: url("/img/john.png");
}

如果遍历的对象是一个 map，那么我们就可以使用两个变量来存储元素的 key 和 value，示例如下：

$ppl: ( usr1:bob, usr2:john, usr3:bill, usr4:mike );
@each $key, $usr in $ppl  {
    .#{$usr}-avatar {
        background-image: url('/img/#{$usr}.png');
    }
}
//针对多个列表的遍历
$alt: alert, yellow, red;
$sub: submit, white, green;
$bck: back, blue, transparent;
@each $type, $txt, $back in $alt,$sub,$bck {
    .#{$type}-button {
        color: $txt;
        background-color: $back;
    }
}

参考文献： sass中文文档

sass使用入门