Pigeon Vue

Scss ​

1.使用变量 ​

1-1.变量声明 ​

  • 以 $ 起头
scss
$nav-color: #F90;

.nav-cus {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

.nav-cu1 {
  width: $width;//编译异常，无法使用
}


//编译后
.nav-cus {
  width: 100px;
  color: #F90;
}

1-2.变量引用 ​

  • 声明变量时，引用其他变量，达成组合效果
scss
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

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

1-3. 变量名用中划线还是下划线分隔 ​

  • 中划线和下划线会自动转换，建议统一使用中划线
scss
$link-color: blue;
.a-cus {
  color: $link_color;
}
//编译后
.a-cus {
  color: blue;
}

2.嵌套CSS规则 ​

scss
//原始css写法，重复书写
#content article h1 { color: #333 };
#content article p { margin-bottom: 1.4em };
#content aside { background-color: #EEE };

//scss嵌套写法
#content {
  background-color: #f5f5f5;
  article {
    h1 { color: #333 };
    p { margin-bottom: 1.4em };
  }
  aside { background-color: #EEE };
}
 /* 编译后 */
#content { background-color: #f5f5f5 };
#content article h1 { color: #333 };
#content article p { margin-bottom: 1.4em };
#content aside { background-color: #EEE };

2-1. 父选择器的标识符& ​

scss
article a {
  color: blue;
  :hover { color: red };
}
//编译后
article a { color: blue };
//多余的空格导致异常
article a :hover { color: red };

//使用父选择器
article a {
  color: blue;
  &:hover { color: red };
}
//编译后
article a { color: blue };
article a:hover { color: red };


//使用父选择器
#content aside {
  color: red;
  body.ie & { color: green };
}
//可类比为&符号会去更换为父级信息
#content aside {color: red};
body.ie #content aside { color: green };

2-2. 群组选择器的嵌套 ​

scss
//基础写法
.container h1, .container h2, .container h3 { margin-bottom: .8em };
//scss
.container {
  h1, h2, h3 {margin-bottom: .8em};
}
//基础写法
nav a, aside a {color: blue};
//scss
nav, aside {
  a {color: blue};
}

2-3. 子组合选择器和同层组合选择器：>、+和~ ​

scss
/* 子组合选择器>选择一个元素的直接子元素 */
article > section { border: 1px solid #ccc };
//同层相邻组合选择器+
header + p { font-size: 1.1em };
//同层全体组合选择器~
article ~ article { border-top: 1px dashed #ccc };

//scss写法
article {
  ~ article { border-top: 1px dashed #ccc };
  > section { background: #eee };
  dl > {
    dt { color: #333 };
    dd { color: #555 };
  }
  nav + & { margin-top: 0 };
}
//编译后
article ~ article { border-top: 1px dashed #ccc };
article > footer { background: #eee };
article dl > dt { color: #333 };
article dl > dd { color: #555 };
nav + article { margin-top: 0 };

2-4. 嵌套属性 ​

scss
nav {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}
//编译后
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

3. 导入SASS文件; ​

  • 与css @import不同，会在编译时归纳而非在@import的时候再去下载
  • @import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀

3-1. 使用SASS部分文件; ​

  • 为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件
  • sass局部文件的文件名以下划线开头
  • 可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。

3-2. 默认变量值; ​

  • 方便使用者自定义实际使用效果
scss
$link-color: blue;
//覆盖上面的blue属性  属性为red
$link-color: red;
a {
color: $link-color;
}

//用户在导入下面的sass局部文件之前声明了一个$fancybox-width变量，那么下面的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px
$fancybox-width: 400px !default;
.fancybox {
  width: $fancybox-width;
}

3-3. 嵌套导入; ​

  • 允许@import命令写在css规则内。生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。
  • 导入的文件内定义的变量只会在作用域中生效，不用担心污染全局
scss
//_blue-theme.scss
aside {
  background: blue;
  color: white;
}

//导入
.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

3-4. 原生的CSS导入; ​

4. 静默注释; ​

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

5. 混合器; ​

  • 主要用于大段的样式重用，较变量更为便利。
  • 通过sass的混合器实现大段样式的重用。
  • 混合器使用@mixin标识符定义。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。
  • 大量的重用可能会导致生成的样式表过大，导致加载缓慢。避免滥用。
scss
@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;
}
//sass最终生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

5-1. 何时使用混合器; ​

  • 判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-cornersfancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。

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

scss
//带层级
@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. 给混合器传参; ​

scss
//类似func  传3个参数进来
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
//导入方法1
a {
  @include link-colors(blue, red, green);
}
//导入方法2
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}
//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

5-4. 默认参数值; ​

scss
//类似func  传1~3个参数进来  如果没有后续参数，都会使用$normal的参数
@mixin link-colors($normal,$hover: $normal,$visited:$normal)
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

6. 使用选择器继承来精简CSS; ​

scss
//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
//应用到.seriousError a
.error a{  
  color: red;
  font-weight: 100;
}
//应用到hl.seriousError
h1.error { 
  font-size: 1.2rem;
}
//.seriousError从.error继承样式
.seriousError {
  @extend .error;
  border-width: 3px;
}

6-1. 何时使用继承; ​

  • 如果.error的所有样式都在同一个地方，使用一个选择器组（比如说.error.seriousError）给这两个选择器写相同的样式。
  • 如果是分散在样式表的不同地方。使用一个混合器为这两个类提供相同的样式，但当.error的样式修饰遍布样式表中各处时，这种做法面临着跟使用选择器组一样的问题。
  • 使用@extend。让.seriousError从.error继承样式，使两者之间的关系非常清晰。

6-2. 继承的高级用法; ​

  • 任何css规则都可以继承其他规则，几乎任何css规则也都可以被继承。
  • 最常用的一种高级用法是继承一个html元素的样式。
scss
.disabled {
  color: gray;//颜色变灰
  @extend a;//继承a
}
  • 一条样式规则继承了一个复杂的选择器，那么它只会继承这个复杂选择器命中的元素所应用的样式。
  • 如果.seriousError@extend.important.error ， 那么.important.error 和h1.important.error 的样式都会被.seriousError继承，但是.important或者.error下的样式则不会被继承。
scss
//单独继承多个类
.one {
    width:100px;height:100px;
}
.two {
    /*继承的样式*/
    @extend .one;
    @extend .three;
    /*独立的样式*/
    background:red;
    border:5px solid #000;
}
.three {
    padding:10px;
}
//编译之后
.one, .two {
  width: 100px;
  height: 100px;
}

.two {
  background: red;
  border: 5px solid #000;
}

.three, .two {
  padding: 10px;
}
  • 一个选择器序列（#main .seriousError）@extend .error，那么只有完全匹配#main .seriousError这个选择器的元素才会继承.error的样式，就像单个类名继承那样。
  • 像#main .error这种选择器序列是不能被继承的。

6-3. 继承的工作细节; ​

  • .seriousError @extend .error， 那么样式表中的任何一处.error都用.error,.seriousError这一选择器组进行替换。如上例子中的two。
  • 混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
  • 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

6-4. 使用继承的最佳实践; ​

  • 通常使用继承会让你的css美观、整洁。因为继承只会在生成css时复制选择器，而不会复制大段的css属性。
  • 不要在css规则中使用后代选择器（比如.foo .bar）去继承css规则。会导致规则的复杂度极高。

Last updated:

Author: Tt | 养老院高尚老头 | 张登哲