scss常用语法(摘自sass中文文档)

  • sass中文文档https://www.sass.hk/docs/

  • 嵌套规则

  • 父选择器

在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器

& 必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器,例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}
//编译为
#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }
//当父选择器含有不合适的后缀时,Sass 将会报错

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中

 
//编译为
.hello .search{
    font-size:24px;
    font-weight:700;
    }
  • 注释

Sass 支持标准的 CSS 多行注释 /* */,以及单行注释 //,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会

  • 变量

$width: 5em;
//使用
#main {
  width: $width;
}
//变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global 声明:
#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}
  • 运算(加减乘除)

//在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值
p:before {
  content: "I ate #{5 + 10} pies!";
}
//编译为
p:before {
  content: "I ate 15 pies!"; }
  • 插值语句#{}

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

  • @-rules与指令

@import

//Sass 允许同时导入多个文件,例如同时导入 rounded-corners 与 text-shadow 两个文件
@import "rounded-corners", "text-shadow";

@media

Sass 中 @media 指令与 CSS 中用法一样,只是增加了一点额外的功能:允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内,编译时,@media 将被编译到文件的最外层,包含嵌套的父选择器。这个功能让 @media 用起来更方便,不需要重复使用选择器,也不会打乱 CSS 的书写流程。

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

@extend

@extend 的作用是将重复使用的样式 (.error) 延伸 (extend) 给需要包含这个样式的特殊样式(.seriousError

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

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

 延伸复杂的选择器

Class 选择器并不是唯一可以被延伸 (extend) 的,Sass 允许延伸任何定义给单个元素的选择器,比如 .special.coola:hover 或者 a.user[href^="http://"] 等

//同 class 元素一样,a:hover 的样式将继承给 .hoverlink。
.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

多重延伸

//同一个选择器可以延伸给多个选择器,它所包含的属性将继承给所有被延伸的选择器:
//多重延伸可以使用逗号分隔选择器名,比如 @extend .error, .attention; 与 @extend .error; @extend.attention 有相同的效果
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

混合指令mixin/include

混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class

为便于书写,@mixin 可以用 = 表示,而 @include 可以用 + 表示

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
//引用混合样式 @include
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
//编译为
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }
//混合样式中也可以包含其他混合样式
@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }
//混合指令也可以使用给变量赋值的方法给参数设定默认值,然后,当这个指令被引用的时候,如果没有给参数赋值,则自动使用默认值
@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 {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

控制指令

@if、@for、@each、@while 

 

你可能感兴趣的:(css)