SASS常用语法备忘录

关于SCSS

SCSS 语法使用 .scss 文件扩展名。除了极少部分的例外, 它是 CSS 的超集,也就是说 所有有效的 CSS 也同样都是有效的 SCSS 。 由于其与 CSS 的相似性,它是最容易上手的语法, 也是最流行的语法。

变量

SASS所有变量以$开头,例如:


  $blue : #1875e7; 

  div {
   color : $blue;
  }

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

  $side : left;

  .rounded {
    border-#{$side}-radius: 5px;
  }

计算功能

SASS允许在代码中使用算式:

  body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

嵌套

SASS允许选择器嵌套。比如,下面的CSS代码:

  div h1 {
    color : red;
  }

可以写成:

  div {
    hi {
      color:red;
    }
  }

属性也可以嵌套,比如border-color属性,可以写成:

  p {
    border: {
      color: red;
    }
  }

注意,border后面必须加上冒号。

引用父元素

在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

  a {
    &:hover { color: #ffb3ff; }
  }

注释

SASS共有两种注释风格。

标准的CSS注释 / comment / ,会保留到编译后的文件。

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

!default

含义是“by default",即”默认值是“,例如:

$heading-font-family:$body-font-family !default;`

继承

SASS允许一个选择器,继承另一个选择器。比如,现有class1:

  .class1 {
    border: 1px solid #ddd;
  }

class2要继承class1,就要使用@extend命令:

  .class2 {
    **@extend** .class1;
    font-size:120%;
  }

Mixin

Mixin有点像C语言的宏(macro),是可以重用的代码块。

使用@mixin命令,定义一个代码块。


  @mixin left {
    float: left;
    margin-left: 10px;
  }

使用@include命令,调用这个mixin。

  div {
    @include left;
  }

mixin的强大之处,在于可以指定参数和缺省值。

  @mixin left($value: 10px) {
    float: left;
    margin-right: $value;
  }

使用的时候,根据需要加入参数:

  div {
    @include left(20px);
  }

下面是一个mixin的实例,用来生成浏览器前缀。

  @mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
  }

使用的时候,可以像下面这样调用:

  #navbar li { @include rounded(top, left); }

  #footer { @include rounded(top, left, 5px); }

颜色函数

SASS提供了一些内置的颜色函数,以便生成系列颜色。

  lighten(#cc3, 10%) // #d6d65c
  darken(#cc3, 10%) // #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c

插入文件

@import命令,用来插入外部文件。

  @import "path/filename.scss";

如果插入的是.css文件,则等同于css的import命令。

  @import "foo.css";

高级用法

条件语句

@if可以用来判断:

  p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
  }

配套的还有@else命令:

  @if lightness($color) > 30% {
    background-color: #000;
  } @else {
    background-color: #fff;
  }

循环语句

SASS支持for循环:

  @for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }

也支持while循环:

  $i: 6;

  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }

each命令

作用与for类似:

  @each $member in a, b, c, d {
    .#{$member} {
      background-image: url("/image/#{$member}.jpg");
    }
  }

自定义函数

SASS允许用户编写自己的函数。

  @function double($n) {
    @return $n * 2;
  }

  #sidebar {
    width: double(5px);
  }

映射函数

在 Sass 中 map 自身带了七个函数:

map-get($map,$key):根据给定的 key 值,返回 map 中相关的值。
map-merge($map1,$map2):将两个 map 合并成一个新的 map。
map-remove($map,$key):从 map 中删除一个 key,返回一个新 map。
map-keys($map):返回 map 中所有的 key。
map-values($map):返回 map 中所有的 value。
map-has-key($map,$key):根据给定的 key 值判断 map 是否有对应的 value 值,如果有返回 true,否则返回 false。
keywords($args):返回一个函数的参数,这个参数可以动态的设置 key 和 value。
Sass Maps的函数

1、map-get($map,$key)

map-get($map,$key) 函数的作用是根据 $key 参数,返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中,将返回 null 值。此函数包括两个参数:

$map:定义好的 map。
$key:需要遍历的 key。

//SCSS
$social-colors: (
dribble: #ea4c89,
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
.btn-dribble{
color: map-get($social-colors,facebook);
}

//编译后的css
.btn-dribble {color: #3b5998; }

2、map-has-key($map,$key) 函数  

map-has-key($map,$key) 函数将返回一个布尔值。当 $map 中有这个 $key,则函数返回 true,否则返回 false。

@if map-has-key($social-colors,facebook){
.btn-facebook {
color: map-get($social-colors,facebook);
}
} @else {
@warn "No color found for faceboo in $social-colors map. Property ommitted."
}
但总觉得这样写是傻傻的,总不可能每获取一个 key 都写一个 @if 语句吧。其实不用这么复杂,我们可以自定义一个函数,比如 colors():

@function colors($color){
@if not map-has-key($social-colors,$color){
@warn "No color found for #{$color} in $social-colors map. Property omitted.";
}
@return map-get($social-colors,$color);
}
有了这个函数之后,我们就可以这样使用

.btn-dribble {
color: colors(dribble);
}
.btn-facebook {
color: colors(facebook);
}
.btn-github {
color: colors(github);
}
.btn-google {
color: colors(google);
}
.btn-twitter {
color: colors(twitter);
}
.btn-weibo {
color: colors(weibo);
}
当然,如果你对 Sass 的指令熟悉的话,可以使用 @each:
ocial-network:dribble,facebook,github,google,twtter,weibo;<br>@each $social-network,$social-color in $social-colors {
.btn-#{$social-network} {
color: colors($social-network);
}
}

3、map-keys($map)

map-keys($map) 函数将会返回 $map 中的所有 key。这些值赋予给一个变量,那他就是一个列表。如:

map-keys($social-colors);
其返回的值为:

"dribble","facebook","github","google","twitter"

换句话说:

$list: map-keys($social-colors);

相当于:

$list:"dribble","facebook","github","google","twitter";

这个时候,就可以配合 Sass 的 list 做很多事情。

上面的示例,可以做通过 map-keys($map) 来做一个修改:

@function colors($color){
$names: map-keys($social-colors);
@if not index($names,$color){
@warn "Waring: #{$color} is not a valid color name.";
}
@return map-get($social-colors,$color);
}
上面代码中最不同之处,我们使 用map-key s将 $social-colors 这个 map 的所有 key 取出,并赋予给一个名 为 $names 的列表。然后通过 index($names,$color) 返回 $color 在 $names 位置,如果这个位置不存在,将返回提示信息,如果存在将返回正确的值。

同样,也可以通过 @each 或者 @for 遍历出所有值:

// @each
@each $name in map-keys($social-colors){
.btn-#{$name}{
color: colors($name);
}
}

//@for
@for $i from 1 through length(map-keys($social-colors)){
.btn-#{nth(map-keys($social-colors),$i)} {
color: colors(nth(map-keys($social-colors),$i));
}
}
虽然使用的方法不一样,但最终得到的 CSS 是一样的

4、map-values($map)

map-values($map) 函数类似于 map-keys($map) 功能,不同的是 map-values($map )获取的是 $map 的所有 value 值,可以说也将是一个列表。而且,map-values($map) 中如果有相同的 value 也将会全部获取出来。

如前面的示例,使用:

map-values($social-colors)
将会返回:

#ea4c89,#3b5998,#171515,#db4437,#55acee
值与值之前同样用逗号分隔。

5、map-merge($map1,$map2)

map-merge($map1,$map2)
map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并,然后得到一个新的 $map。如果你要快速将新的值插入到 $map 中的话,这种方法是最佳方法

如:

$color: (
text: #f36,
link: #f63,
border: #ddd,
backround: #fff
);
$typo:(
font-size: 12px,
line-height: 1.6
);
//如果希望将这两个 $map 合并成一个 map,我们只要这样做:
$newmap: map-merge($color,$typo);
//将会生成一个新的 map:
$newmap:(
text: #f36,
link: #f63,
border: #ddd,
background: #fff,
font-size: 12px,
line-height: 1.6
);
这样你就可以借助 map-get( ) 等函数做其他事情了。

不过有一点需要注意,如果 $map1 和 $map2 中有相同的 $key 名,那么将 $map2 中的 $key 会取代 $map1 中的值

6、map-remove($map,$key)

map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key,从而得到一个新的 map。其返回的值还是一个 map。他并不能直接从一个 map 中删除另一个 map,仅能通过删除 map 中的某个 key 得到新 map。如:

$map:map-remove($social-colors,dribble);
返回的是一个新 map:

facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee

);
如果删除的 key 并不存在于 $map 中,那么 map-remove() 函数返回的新 map 和以前的 map 一样。

map-deep-merge新映射函数

最近,我在分析vuetify自带的SASS变量定义列表中发现map-deep-merge映射函数频繁出现,网络搜索没有直接对应内容。
最后,在SASS官网上找到相关定义,如下:

 map.deep-merge($map1, $map2) //=> map 

解释是:”Identical to map.merge(), except that nested map values are also recursively merged.“
示例代码如下:

$helvetica-light: ("weights": ("lightest": 100, "light": 300))
$helvetica-heavy: ("weights": ("medium": 500, "bold": 700))

@debug map.deep-merge($helvetica-light, $helvetica-heavy)

其实,在Vuetify应用中更常出现的是如下形式:

$grid-breakpoints: map-deep-merge( ( 'xs': 0, 'sm': 600px, 'md': 960px, 'lg': 1280px - 16px, 'xl': 1920px - 16px ), $grid-breakpoints );

参考

http://www.ruanyifeng.com/blog/2012/06/sass.html

https://sass-lang.com/documentation/modules/map#deep-merge

https://www.cnblogs.com/kt520/p/5711740.html
https://vuetifyjs.com/en/api/vuetify/

上一篇:Flutter 基本控件--Text的使用


下一篇:[LeetCode] 1129. Shortest Path with Alternating Colors