Sass

偷得浮生的狗子
63 阅读1分钟

嵌套

规则和less一样


#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

父选择器&

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

此时可以被编译成为

a {
  font-weight: bold;
  text-decoration: none; }
a:hover {
    text-decoration: underline; }
body.firefox a {
    font-weight: normal; }
  • 子组合选择器>选择一个元素的所有直接子元素
  • 同层相邻组合选择器+选择跟在后面的相邻兄弟元素
  • 同层全体组合选择器~，选择所有跟在后面的同层兄弟元素

属性嵌套

当遇到用-连接的属性名的时候可以拆分成：{}的形式，内部用键值对表示

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

注释

注释分// 和 /* */

// 这个的属实不会被编译进css文件中，而/* */会被编译进去

变量$

$width: 5em;
#main {
  width: $width;
}

变量中使用的-和_是互通的。

数据类型

  • 数字，1, 2, 13, 10px
  • 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
  • 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
  • 布尔型，true, false
  • 空值，null
  • 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  • maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

数字的运算

image.png

这个时候要注意除法，只有（）包裹的才是除法，

数字的常用函数

image.png

以及max()、min()

字符串的常用函数

image.png

颜色函数

  • adjust-hue（）// deg|%，，色相值做调整==换算一个新颜色。度数值是在 -360deg 至 360deg 之间，也可以是百分数：
  • lighten（）、darken（）// %|. 亮度值做调整，0-1之间，也可以是百分数
  • asturate()、desaturate（）// %|. 饱和度值做调整，0-1之间，也可以是百分数

列表

可以理解为数组

map

可以理解为obj

image.png image.png

@import导入

和原生css导入区别一下，这个只是需要@import 'xx.scss'，并且支持导入到某个作用域块内部。

如果导入的文件名是_开头，则在导入时可以省略_，表示为此文件只是导入到文件内而不是编译成新的css文件。

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

混合器支持传参

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

当混合器被@include时，你可以把它当作一个css函数来传参，注意顺序

a {
  @include link-colors(blue, red, green);
}

$normal

可以使用$normal进行默认传参

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

@extend继承

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。我理解为这更像是添加了styleList

控制条件

@if

格式：类似于普通if

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

@for

有2种格式，@for $var from <start> through <end>，或者 @for $var from <start> to <end>，

区别在于第一个是全闭区间[ ]，后一个是左闭右开区间[ )

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

@each

格式：@each $var in <list>{}

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

@while

格式：@while 条件 {}

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

自定义函数

格式：@function 名称 （参数1，……）{}

$colors: (lightl: #ffffff, dark : #000000);
@function color($key) {
 @return map-get($colors，$key);
}

body {
 background-color: color(light);
}

同时可以使用@warn: ''、 @error: ''来进行信息提示。

avatar
文章
阅读
粉丝