天天看点
返回

sass语法速查

数据类型 

数字，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)

数字运算符

+, -, *, /, %,

/ 当作除法的规则

如果值，或值的一部分，是变量或者函数的返回值

如果值被圆括号包裹

如果值是算数表达式的一部分

另外在sass 2.0 中 /用作除法可能会被废除，推荐使用，在这之前还是使用 /

fontsize:  math.div(500px, 2)
           
p {
  width: 1in + 8pt;
  fontSize: (500px/2);
  height: 200px * 2;
}

关系运算符

<, >, <=, >=

相等运算符

==, !=

$ 变量符 

/** 定义变量 */ 
$link-color: blue;
/** 使用变量 */
div {
	color: $link-color
}

-或_ 命名连接符

定义变量名称时，可以用-或者_连接单词，并且两种方式互相兼容

/** 定义变量 */ 
$link-color: blue;
/** 使用变量 */
div {
	color: $link_color
}

# id选择符

和css语法规则一样

<div id="content">123456</div>
           
/** 定义变量 */ 
$link-color: blue;

/** 使用变量 */
#content {
	color: $link_color
}

嵌套规则 

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

& 父选择器标识符

与less编译器相同

article a {
  color: blue;
  &:hover { color: red }
}
           
/** 编译后 */
article a { color: blue }
article a:hover { color: red }

, 群组选择器

与css使用方法一致

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

> 子组合选择器

与css使用方法一致

article > section { border: 1px solid #ccc }

+ 同层相邻组合选择器 

$highlight-color： red
.inner + span {
    color: $highlight-color;
}
           
<div class="warpper">
    <div class="inner">
      <span> 123456 </span>
    </div>

    <div class="inner">
      <span>123456</span>
    </div>
    <span>123456</span> // 只有这个标签样式会生效
    <span>123456</span>
</div>

~ 同层全体组合选择器 

$highlight-color： red
.inner ~ span {
    color: $highlight-color;
}
           
<div class="warpper">
    <div class="inner">
      <span> 123456 </span>
    </div>

    <div class="inner">
      <span>123456</span>
    </div>
    <span>123456</span> // 这个标签样式会生效
    <span>123456</span> // 这个标签样式会生效
    <span>123456</span> // 这个标签样式会生效
</div>

嵌套属性 

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

编译后

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

@import 导入

sass语法速查

当然也可以导入css文件，与原生的css兼容，但是导入css文件要加.css后缀。

@import "./index.css"

@mixin 混合器定义 

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

/** 需要传参的混合器 */
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover {
    color: $hover;
  }
  &:visited {
    color: $visited;
  }
}

@include 混合器使用 

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

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

编译结果

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

@extend 样式继承

一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译为

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

伪元素同样可以继承

.hoverlink {
	
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

编译为

a:hover, .hoverlink {
  text-decoration: underline; }

#{} 插值语句

类似于模板字符串

在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：

p:before {
  content: "I ate #{5 + 10} pies!";
}

当然也可以在其中选择变量

$value1: 5;
$value2: 10;

p:before {
  content: "I ate #{$value1 + $value2} pies!"; }

编译为

p:before {
  content: "I ate 15 pies!"; }

插值语句可以在选择器和属性中使用

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

编译为

p.foo {
  border-color: blue; }

@if 条件语句

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

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

编译为

p {
  border: 1px solid; 
  }

@for 循环创建

一般用于封装常用样式

@for $i from 1 through 3 {
  .width-#{$i * 5}px {
    width: 5 * $i + px;
  }
}

编译为

.width-5px {
  width: 5px; }
.width-10px {
  width: 10px; }
.item-15px {
  width: 15px; }

@each 遍历

@each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表。

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

@while 

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

编译为

.item-6 {
  width: 12px; }

.item-4 {
  width: 8px; }

.item-2 {
  width: 4px; }

@function @return

@function 自定义函数 @return 函数的返回值

在自定义函数中可以使用自定义变量

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

@content 内容附加

当 @content 在指令中出现过多次或者出现在循环中时，额外的代码将被导入到每一个地方。

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
// color：$color 就是额外的代码，也是@content会展示的内容
.colors {
  @include colors { color: $color; }
}

编译为

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

@media 媒体查询

与css规则一致，只是在sass中允许选择器中嵌套使用。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
css scss sass
上一篇: 使用ArrayPool池化大型数组（翻译）
下一篇: 【SPDK】四、reactor线程

继续阅读