scss学习之路

一.背景介绍:

css不是一种真正意义上的编程语言，只能死板并且重复的进行。

为了解决css的这些缺点，能够对css进行预处理的"中间语言"就产生了，以此来实现某些编程特性。

也就是在编写中间语言过程中，可以使用编程方式和思维，中间语言不能直接被浏览器所解析。

将这个中间语言编译成真正的css，供浏览器解析使用。

二.关于sass和scss:

sass是最早的css预处理语言之一。

为了适应编程风格的需求，sass在编程风格上做了一些修改，现在称之为scss。

scss增加了一些新的功能，增强了对css3的支持，其语法完全兼容css3，并且继承了sass的强大功能。

scss即是sass的扩展。

它可以最大程度的减少你的css代码冗余度。

三.sass和scss语法的区别:

sass代码如下:

#sidebar
  width: 30%
  background-color: #faa

scss代码如下:

#sidebar {
  width: 30%;
  background-color: #faa;
}

可以看到scss和sass的区别主要在于大括号的有无，在sass中代码对缩进敏感，scss中带有大括号即可随意变更格式

四.语法

声明变量

使用$符号声明一个变量highlight-color，并赋值为#F90

然后在后面的代码中进行引用

$highlight-color: #F90;

.selected {
  border: 1px solid $highlight-color;
}

编译后：

.selected {
  border: 1px solid #F90;
}

 

---

变量分隔符

scss认为中划线和下划线是完全相等的

$link-color: blue;
a {
  color: $link_color;
}

 

---

变量作用域

局部变量与全局变量

局部变量：定义在选择器之内的变量，使用范围是该选择器与子选择器

全局变量：定义在选择器之外的变量，子选择器中也定义了同名变量，则会覆盖全局变量

全局变量：

$bg-color: green;
div{
  color:$bg-color;
}


局部变量：

div{
  $border-width:5px;
  color:$bg-color;
  border:$border-width solid red;
}

 

---

更改局部变量的作用域范围

在变量后面添加 !global ，并声明选择器为 @mixin 混合器，最后使用 @include 引用该混合器，即可在其他选择器中使用该局部变量

@mixin button-style {
  $btn-bg-color: lightblue !global;
  color: $btn-bg-color;
}
button {
  @include button-style;
}
.wrap {
  background: $btn-bg-color;
}


编译后：

button {
  color: lightblue; 
}
.wrap {
  background: lightblue; 
}

 

---

设置变量的默认值

在变量后面添加 !default 即可指定默认值

在浏览器编译时，如果该变量已经有值，那么不使用默认值，如果没有值，则使用默认值

$content:"softwhy.com";
$content: "antzone" !default;
#main {
  content: $content;
}


编译后：

#main {
  content: "softwhy.com"; 
}

 

---

 编译后保留注释

// 编译后在css文件中不保留注释

/*    */ 编译后在css文件中保留注释

$padding: 50px;
div {
 //antzone
  padding:$padding;
}


$padding: 50px;
div {
  /*antzone*/
  padding : $padding;
}

 

---

嵌套写法

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

编译后：

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

---------------------------------------------------

nav, aside {
  a {color: blue}
}

编译后：

nav a, aside a {
    color: blue
}

 

---

&父选择器标识符

&即代表当前元素的父类

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;
}

 

---

@import引入外部文件

css的@import命令会造成多次HTTP请求，导致效率低下

scss将引入的文件合并至目标中

scss的文件在引入时皆可以省略扩展名

@import "colors.scss";


scss文件的扩展名省略掉


@import "colors";

局部引入

blue-theme.scss

aside {
  background: blue;
  color: white;
}


.blue-theme {@import "blue-theme"}


.blue-theme aside {
  background: blue;
  color: #fff;
}

 

---

partial部分文件

那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。

对此，sass有一个特殊的约定来命名这些文件，预定规则如下:

            局部文件的文件名以下划线开头

这样在编译的时候就不会生成对应的css文件了，只会单纯的作为一个导入文件使用。

@import themes/_night-sky.scss


省略扩展名


@import themes/_night-sky

 

---

字符串类型传参

接收时使用使用 #{} 包含参数即可解释参数为无引号字符串，便于在 mixin 中引用选择器名

防止运算符之间的冲突

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");


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

-----------------------------------------------

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}


p {
  font: 12px/30px; 
}

-----------------------------------------------

p {
  $font-size: 12px;
  $line-height: 30px;
  font: $font-size/$line-height;
}


p {
  font: 0.4; 
}

 

---

list 列表

如果列表长度不超过一行，始终单行显示

列表使用逗号分隔

末尾不加逗号

嵌套列表时使用括号，其他不需要添加括号

列表第一项的索引是1，而不是0

操作list的函数：

（1）.length($list)：返回一个列表的长度值。

（2）.nth($list, $n)：返回一个列表中指定的某个标签值。

（3）.join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表。

（4）.append($list1, $val, [$separator])：将某个值放在列表的最后。

（5）.zip($lists…)：将几个列表结合成一个多维的列表。

（6）.index($list, $value)：返回一个值在列表中的位置值。

创建一个空列表

$list: ();


标准写法

$font-stack: 'Helvetica', 'Arial', sans-serif;


嵌套写法

$list: ( 
  ("item-1.1", "item-1.2", "item-1.3"), 
  ("item-2.1", "item-2.2", "item-2.3"),
  ("item-3.1", "item-3.2", "item-3.3")
);

 

---

map对象

与list相同，只不过存储的值是key:value键值对的形式存在

操作map的函数：

（1）.map-get($map,$key)：根据给定key，返回map中对应的value。

（2）.map-merge($map1,$map2)：将两个map合并成一个新的map。

（3）.map-remove($map,$key)：从map中删除一个key，返回一个新map。

（4）.map-keys($map)：返回map中所有的key。

（5）.map-values($map)：返回map中所有的value。

（6）.map-has-key($map,$key)：根据给定key判断map是否有对应value，有返回true，否则false。

（7）.keywords($args)：返回一个函数的参数，这个参数可以动态的设置key和value。

普通map

$map: ( 
  $key1: value1, 
  $key2: value2, 
  $key3: value3 
)


嵌套map

$map: ( 
  key1: value1, 
  key2: ( 
    key-1: value-1, 
    key-2: value-2, 
  ), 
  key3: value3 
);

 

---

字符串连接符

根据等式前方是否具备引号来生成运算后结果是否具备引号

p:before {
  content: "softwhy.com " + scss;
  font-family: sans- + "serif";
}


p:before {
  content: "softwhy.com scss";
  font-family: sans-serif; 
}

 

---

算术运算符

只有相同单位才可以进行运算，否则会报错

div {
  /*不执行除法操作，原样输出*/
  font-size: 16px / 24px; 
  /*使用插值语法之后，原样输出*/
  font-size: #{$base-size} / #{$line-height}; 
  /* 使用括号包裹之后，执行除法操作*/
  font-size: (16px / 24px); 
  /* 使用变量，执行除法操作*/
  font-size: $base-size / $line-height; 
  /* 调用函数，执行除法操作*/
  opacity: random(4) / 5; 
  /* 使用算术操作符，执行除法操作*/
  padding-right: 2px / 4px + 3px; 
}

 

---

比较运算符

@mixin font-fl($font){
  &:after {
    @if(type-of($font) == string) {
      content: 'My font is: #{$font}.';
    } 
    @else {
      content: 'Sorry, the argument #{$font} is a #{type-of($font)}.';
    }
  }
}
  
h2{
  @include font-fl(sans-serif);
}


运算结果：

h2:after {
  content: 'My font is: sans-serif.';
}


例子：

$padding: 50px;
  
h2 {
  @if($padding <= 20px) {
    padding: $padding;
  } @else {
    padding: $padding / 2;
  }
}

 

---

逻辑运算符

and    or    not

例子：

$num:5;
$x:1;
p {
  @if ($num>5 or $x<2) { border: 1px solid;  }
}

结果：

p {
  border: 1px solid; 
}

 

---

@if() 指令

如果表达式的返回值不是false或者null，就返回指定的样式

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}


p {
  color: green;
}

 

---

@for 指令

用于循环输出，具有两种循环方式

@for $var from through           索引区间是[start,end]

@for $var from to           索引区间是[start,end-1]

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


编译后:

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

 

---

@each指令

主要用于对于list或者map的遍历输出

list：

@each $animal in puma, sea-slug, egret, salamander {
  .#{$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"); 
}
.salamander-icon {
  background-image: url("/images/salamander.png"); 
}



map：

$ppl: ( one:bob, two:john, three:bill, four:mike );
@each $key, $usr in $ppl  {
  .#{$usr}-avatar {
    background-image: url('/img/#{$usr}.png');
  }
}

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

 

---

@while指令

如果表达式的返回值为false，则停止循环

$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; 
}

 

---

@media指令

主要针对于设备进行不同样式的定义

判断设备是否为横屏

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}


编译后：

.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; 
  } 
}

 

---

@at-root指令

添加了@at-root的子元素不参与父元素的样式，会跳出嵌套

@media与@supports指令不会使其跳出嵌套，需要使用without和with配合使用

.parent{
  color:red;
  @at-root .child {
    width:200px;
    height:50px;
  }
}


编译后：

.parent {
  color: red;
}
.child {
  width: 200px;
  height: 50px; 
}

-----------------------------------------

.parent {
  background:red;
  @at-root {
    .child-1 {
      width:200px;
      height:100px;
    }
    .child-2 {
      width:150px;
      height:50px;
    }
  }
}

编译后：

.parent {
  background: red; 
}
.child-1 {
  width: 200px;
  height: 100px; 
}
.child-2 {
  width: 150px;
  height: 50px; 
}

 

---

without和with

默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support指令。

默认的@at-root就是@at-root (without:rule)。

如果要跳出这两种指令，则需使用@at-root (without: media)，@at-root (without: support)。

supports ：检查浏览器是否支持该属性

media ：检测媒体（横屏竖屏）

 without：跳出指令

@media print {
  .parent{
    color:#f00;
    @at-root .child {
      width:200px;
      height:50px;
    }
  }
}

只能够跳出.parent，但是不能够跳出@media

编译后：

@media print {
  .parent {
    color: #f00; 
  }
  .child {
    width: 200px;
    height: 50px; 
  } 
}

---------------------------------------

@media print {
  .parent{
    color:red;
    @at-root (without: media) {
      .child {
        width:200px;
        height:50px;
      } 
    }
  }
}

只跳出media，并不会跳出.parent

编译后：

@media print {
  .parent {
    color: red; 
  } 
}
.parent .child {
  width: 200px;
  height: 50px; 
}

------------------------------------------

@media print {
  .parent{
    color:red;
    @at-root (without: all) {
      .child {
        width:200px;
        height:50px;
      } 
    }
  }
}

跳出全部

编译后：

@media print {
  .parent {
    color: red; 
  } 
}
.child {
  width: 200px;
  height: 50px; 
}

 with：不跳出指定的指令，其他的全部跳出

@media print { 
  @supports ( transform-origin: 5% 5% ) { 
    @at-root (with: supports){
      .foo { 
        color: green; 
        color: gray; 
      }
    }
  } 
}

编译后：

@supports (transform-origin: 5% 5%) {
  .foo {
    color: green;
    color: gray;
  }
}

 

---

@content指令

在使用@include引用混合器的时候传递给混合器

当使用@include引用混合器的时候，里面所定义的css代码就会插入到@content所在的位置

@mixin antzone {
  #head {
    @content;
  }
}
@include antzone {
  #logo {
    width:180px;
    height:50px;
  }
}


#head #logo {
  width: 180px;
  height: 50px; 
}

 

---

@mixin混合器

如果存在大段可以重复使用的css代码，使用混合器可以方便的引用它

@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;
}

编译后：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}

-------------------------------------

直接在最外层引用

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

编译后：

a {
  color: blue;
  background-color: red;
}

-------------------------------------

嵌套引用

@mixin child-corners {
  border-radius: 5px;
}
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  @include child-corners;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

编译后：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}

混合器没带参数，那么可以省略小括号；如果带有参数，必须带有小括号
参数与参数之间用逗号分隔

如果没有传递此参数，那么就直接使用默认值。

如果传递了此参数，那么新的参数将会覆盖默认参数

@mixin setborder($color, $width: 2px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { 
  @include setborder(green); 
}
h1 { 
  @include setborder(green, 4px); 
}

---------------------------------------------

@mixin setborder($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
h1 { 
  @include setborder($color: green, $width: 4px); 
}

参数变量（...）也可以在@include引用混合器的时候，将值列表中的值逐条作为参数引用：

@mixin colorlist($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ccc, #0ff, #fff;
.orignal{
  @include colorlist($values...);
}

非必传值可以使用null来代替

如果只传了一个参数，接收时时两个参数，并且没有默认值，则会报错

@mixin antzone-div($color, $font-size) {
  color:$color;
  font-size:$font-size;
}
div{
  @include antzone-div(blue, null);
}

 

---

@mixin和class 区别:

类名是在html使用，而混合器是在样式表中应用的

class具有语义化含义，主要是描述元素的含义

mixin混合器是展示行的描述，用来描述应用了后产生什么样的效果

混合器和类配合使用可以写出整洁的html和css

 

---

@extend

继承来自选择器的样式

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译后：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; 
}
.seriousError {
  border-width: 3px; 
}

在@media中使用extend不可以继承@media之外的类

 

---

!optional指令

!optional标记前面的扩展不必须生成一个新的选择器，即使不存在也不会报错

p{
  color:red;
  @extend .notice !optional
}

编译：

p {
  color: red;
}

 

---

% 占位符

如果定义的样式选择器在页面中没有使用过时，就可以使用%去定义选择器，不会进行编译 

%icon {
  color:red;
  margin: 0 .5em;
}
.error-icon {
  @extend %icon;
  /*code*/
}
.seriousError-icon {
  @extend %icon;
  /*code*/
}

编译后：

.error-icon, .seriousError-icon {
  color: red;
  margin: 0 .5em; 
}
.error-icon {
  /*code*/
}
.seriousError-icon {
  /*code*/
}

 

---

使用function定义函数

@function开头声明一个函数，函数内部使用@return返回一个值，参数可以省略

@function column-width($col, $total) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(3, 8); 
}

编译后：

.col-3 {
  width: 37.5%;
}

 

---