【CSS】sass/scss

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能

css功能扩展

1嵌套规则

.css1{
    .css2{}
}

2属性嵌套

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
//命名空间可以包含自己的属性值

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

3父选择器&

a {
  &:hover {
    color: red;
  }
}

4.群组选择器

nav, aside {
  a {color: blue}
}

5.后代选择器、子选择器>、相邻选择器+、同层选择器~

article section { margin: 5px }
article > section { border: 1px solid #ccc }
header + p { font-size: 1.1em }
article ~ article { border-top: 1px dashed #ccc }

　　

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
// 编译为
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

　　

注释

多行注释/* */，会被完成输出到编译后的css文件中

单行注释//，不会被编译显示

变量$

变量名中中划线、下划线是互通的

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

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用(即局部变量)，全局定义的则为全局变量。

局部变量添加!global声明转换为全局变量

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

#sidebar {
  width: $width;
}

数据类型

1.数字，1，2,13,10px

2.字符串：有引号与无引号字符串，"foo"，baz

3.颜色：blue，#4a3f9，rgba(255,0,0,0.5)

4.布尔型：true，false

5.数组：用空格或逗号作分隔符，1.5em 1em 0 2em， A,B,C

6.maps：相当于JS的object，（key1:value1,key2,value2）

也支持其他css属性，比如unicode字符集，或!important声明。然而Sass不会特殊对待这些属性值，一律视为无引号字符串。

字符串

使用#{}时，有引号字符串将被编译为无引号字符串，便于mixin中引用选择器名

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

编译为

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

 数组

nth 函数可以直接访问数组中的某一项；join 函数可以将多个数组连接在一起；append 函数可以在数组中添加新值；而 @each 指令能够遍历数组中的每一项。

子数组 1px 2px, 5px 6px

如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)

运算

数字运算符+-*/%，如果必要会在不同单位件转换值

关系运算<,>,<=,>=也可用于数组运算

相等运算==,!=也可用于所有数据类型

可以颜色值运算、字符串运算

布尔运算and、or、not

圆括号用来影响运算顺序

插值语句#{}

通过插值语句可以在选择器或属性名中使用变量

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

!default可以在变量的结尾添加，若变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

@-Rules与指令

@import

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

 

允许导入scss或sass文件。被导入的文件中所包含的变量或混合指令都可以在导入的文件中使用，

以下情况@import仅作为普通的css语句，不会导入任何sass文件

1.文件扩展名是.css

2.文件以http://开头

3.文件名是url()

4.@import包含media queries

如果不存在上述情况，文件扩展名是.scss或者.sass则导入成功，若没有指定拓展名sass将会试着寻找文件名相同拓展名为.scss或.sass的文件。

@import "foo.scss";
@import "foo";
@import "rounded-corners", "text-shadow";

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

　

@media

允许其阿紫css规则中嵌套，编译时，将自动被编译到文件的最外层，包含嵌套的父选择器

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

　　

@extend

继承

// 例子1
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
// 例子2
.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

控制指令

@if

当@if的表达式返回值不是false或null时，条件成立

p {
  @if 1 + 1 == 2 { border: 1px solid; }
}

@else，@else if

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

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

@for

在限制的范围重复输出格式

@for $var from <start> through <end>   条件包含[start,end]

@for $var from <start> to <end>   条件包含[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

格式：@each $var in <list>，将变量$var作用于值列表的每一个项目，然后输出结果

@each $animal in puma, sea-slug {
  .#{$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'); }

混合指令

混合指令的用法是在@mixin后添加名称与样式，可用&。需要大段大段重用样式的代码时使用。

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

使用@include引用

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

可使用参数给混合指令中的样式设定变量，并赋值使用。可以给参数设定默认值。

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

使用关键词参数让阅读更方便

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

不确定混合指令需要多少个参数，可以使用参数变量...声明

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}　

函数

$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: grid-width($n: 5); }