scss基础

Scss基础语法

只是觉得记个笔记比较印象深刻，其实去官网看最好了。写的也大部分都是官网上的东西，官网总结的已经很清晰了。只是提炼一下，便于以后查看。Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

1. 声明变量

写法：$变量名: 变量值。 例如: KaTeX parse error: Expected 'EOF', got '#' at position 8: white: #̲ffffff; 以后凡是**s…white代替白色了

这也是有块级作用域的，如果写在{}内，则对这一部分生效，其他位置也可以使用这个变量名；如果写在外部（全局common.scss里），则全局生效；scoped里面则可以看成组件内使用

还有一点，当变量名里有短线或下划线的时候，这两种是通用的。如定义：$color-white: #ffffff,在使用的时候可以用 color: $color_white，_和-是可以被互相识别的。

2. 嵌套写样式

这个也是很常用的，就是让你按照html结构那样写样式，如

<div class="header-area">
	<div class="header-title">菜单
		<div>二级菜单</div>
	</div>
</div>
$black:#000000
.header-area{
    color: white;
    .header-title{
        color:$black;
        div{
            font-size:12px;
        }
    }
}

其中需要注意的一些，如

• &:伪类：例如我们需要写:hover, :active等伪类的时候，如果直接写

  .header{
  ​	:hover{color: blue}
  }
  

  这样是不生效的，这样写解析出来是 .header :hover{}， 伪类前面是不需要空格的。所以要写

  .header{
  	&:hover{color: blue}
  }
  

  这样写解析出来才是 .header:hover{},才把状态用到了header类上

• 父选择器 & { color: green }：用于指代父选择器。如：

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

3. 子选择器和同层选择器

• 子选择器 > ，和css里面一样，选择紧跟着的子元素，就不赘述了
• 同层相邻组合选择器+，如 div+p用于选择选择div元素后紧跟的p元素
• 同层全体组合选择器~, 如p+p选择所有跟在p后的同层p元素，不管它们之间隔了多少其他元素

4. 属性嵌套

在css中有些属性是可以细分的，比如：background可以分为background-color, background-size等等。在scss中这些也是可以嵌套的，例如。就是把属性从-处断开写到{}里

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

就连属性的缩写也可以嵌套，如：

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

Scss的引入：@import 文件名/样式名。 @include 可以用 + 表示，简写为+

导入：@import './color' :把color.scss文件中所有样式添加到当前样式表中(后缀名scss、sass可以省略不写)

但是这有一个问题，它会导致每次导入都生成一个css文件。如果要避免这种情况，可以在命名时以_开头，这样就不会对这个文件进行编译，只在导入时编译。例如想导入themes/_night-sky.scss这个局部文件里的变量，只需在样式表中写@import "themes/night-sky";

这种导入方式也可以写在标签属性内，如：.blue-theme {@import "blue-theme"}这种方式引入的scss文件是局部生效的，块级作用域

静默注释：//所写的注释

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

混合器（写了多条样式的块）：@mixin 样式类名，@mixin 可以用 = 表示，简写为=

例，跨浏览器的圆角

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
//引用这个混合器
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

混合器中也可以使用嵌套以及&等；混合器还可以传参，如

但是mixin传递的变量只能在mixin范围内使用，引入它的部分是不用使用mixin里面的变量的

@mixin link-colors($normal, $hover, $visited: red(默认值)) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

还可以用语法：$name: value的形式传参，这种传参与顺序无关了

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

继承：@extend（基本）

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;//即使用了border和background-colord,等于.error, .seriousError{}，子选择器中也是这个模式的，会继承
  border-width: 3px;
}

继承多个：原理是相同的，但是后继承的会有优先权，类似于样式覆盖的原理，也就是说message和error类都写了相同属性的话，message的会覆盖error的。

.seriousError {
  @extend .error;
  @extend .message
  border-width: 3px;
}

连续继承：类似于父->子->孙，但是，这三个类名写起来是平级的，和以上一样，是用，隔开的

选择器列：暂时不可以将选择器列 (Selector Sequences)，比如 .foo .bar 或 .foo + .bar，延伸给其他元素，但是，却可以将其他元素延伸给选择器列：

#fake-links .link {
  @extend a;
}
a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}
//编译后的结果为
a, #fake-links .link {color: blue; }
a:hover, #fake-links .link:hover {text-decoration: underline; }

• 合并选择器列：选择器列中的某个元素需要延伸给另一个选择器列。如：

  //没有包含相同选择器的情况：这种情况下产生三种：继承的选择器、第一列出现在第二列之前、第二列出现在第一列之前。
  #admin .tabbar a {
    font-weight: bold;
  }
  #demo .overview .fakelink {
    @extend a;
  }
  //合并结果
  #admin .tabbar a,
  #admin .tabbar #demo .overview .fakelink,
  #demo .overview #admin .tabbar .fakelink {font-weight: bold; }
  
  //包含了相同选择器的情况：相同部分将会合并在一起，其他部分交替输出
  #admin .tabbar a {
    font-weight: bold;
  }
  #admin .overview .fakelink {
    @extend a;
  }
  //合并结果
  #admin .tabbar a,
  #admin .tabbar .overview .fakelink,
  #admin .overview .tabbar .fakelink {font-weight: bold; }
  

我们可以看到，.fakelink继承了a的属性，现在是在写.fakelink的css属性，则最后结尾的位置肯定是.fakelink，合并后的前缀就是.fakelink的前缀和a的前缀的交替或者排列后的结果。

@media继承：不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS。也就是说media内部的元素只能从media内继承，而不能从media外部继承

.error {
  border: 1px #f00;
  background-color: #fdd;
}//media外

@media print {
  .e{color:red}//media内
  .seriousError {
    @extend .error;//外部继承，不允许！这是错误的
    @extend .e;//内部继承，允许继承
    border-width: 3px;
  }
}

运算

• == 或 !=：所有数据类型均支持这两个运算方式

• +, -, *, /, %：支持数字的加减乘除、取整等运算，如果必要会在不同单位间转换值。

• <, >, <=, >= ：也可用于数字运算

• +也可用于颜色值的计算：如color: #010203 + #040506;计算过程为：01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，结果为color: #050709;

  乘法同理，分别计算红绿蓝每个的色值，再去合并

• +还可用于字符串计算，如cursor: e + -resize;，结果为cursor: e-resize;

  如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

• #{}插值语句：content: "I ate #{5 + 10} pies!";

插值语句也可以用在选择器上，如：

p.#{$name} {
  #{$attr}-color: blue;
}

• && || ! ：支持布尔型的运算
• 函数：有很多内置的函数，如常用的： 剩余空间自动占满：calc(100% -100px)
• !default用于设置默认值

@-Rules的其他指令

@extend-Only 选择器：定义一套样式，只通过 @extend 指令使用，它们单独使用时，不会被编译到 CSS 文件中。

#context a%extreme {
  color: blue;
  font-weight: bold;
}
.notice {
  @extend %extreme;
}
//结果
#context a.notice {
  color: blue;
  font-weight: bold;
}

@at-root：根据名字就可以看出来，这个表示编译后与根（父）元素同级

.parent {
  ...
  @at-root{
      .child { ... }
      .child1 { ... }
  }
}
//编译后
.parent { ... }
.child { ... }
.child1 { ... }

• @at-root默认能移出选择器，但是不能移出指令（如@media），这时使用without和with。without(:a b)允许传多个参数，移出到他们之外；也可以传all等css规则，表示移出到所有指令和css规则之外。

  @media print {
    .page {
      width: 8in;
      @at-root (without: media) {
        color: red;
      }
    }
  }
  //加without
  @media print {
    .page {
      width: 8in;
    }
  }
  (@media 不加without) .page {color: red;}
  

@debug：将 SassScript表达式的值打印到标准错误输出流。用于调试具有复杂 SassScript 的 Sass 文件

@debug 10em + 12em;
//结果
Line 1 DEBUG: 22em

@warn：将 SassScript 表达式的值打印到标准错误输出流。与debug类似。还可用于验证 mixin 和函数的参数

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @error "$x may not be unitless, was #{$x}.";
  }
  @if unitless($y) {
    @error "$y may not be unitless, was #{$y}.";
  }
  position: relative; left: $x; top: $y;
}//如这个判断x、y是否有单位，没有需要报错的情况

控制指令

@if：表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {
  @if 1 + 1 == 2 { border: 1px solid; }//true
  @if 5 < 3 { border: 2px dotted; }//false
  @if null  { border: 3px double; }
}
//结果
p {border: 1px solid; }

@if也可以与@else-if、@else连用，与平常的逻辑相同

@for：for循环，语法有两种：@for $var from <start> through <end>，或者 @for $var from <start> to <end>(through包含start和end；to含start不含end)

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//结果
.item-1 {width: 2em; }
.item-2 {width: 4em; }
.item-3 {width: 6em; }

@each：语法 $var in <list>, $var表示变量名，<list>表示值列表（遍历列表）

@each $animal in puma, sea-slug, egret {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//结果
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }

使用多个变量时：

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
//结果
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }

@while：令重复输出格式直到表达式返回结果为 false，while的用法

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
//结果
.item-6 {width: 12em; }
.item-4 {width: 8em; }
.item-2 {width: 4em; }

函数指令：自定义函数，能在任何属性值或 Sass script 中使用

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
//结果
#sidebar {width: 240px; }

输出格式（只用了解，就是scss编译后）

:nested嵌套输出格式，就是写的最多的scss格式，展现层级关系

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

:expanded选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进

这个就类似我们用普通css写的样式

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compact每条 CSS 规则只占一行，包含其下的所有属性。

嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

:compressed输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

内置模块Sass： 内置模块 (sass-lang.com)

附上地址，可以自己去看看，主要有几类color，list，map， math，meta，selector，string