Sass&Scss语法规则及使用方法-新闻详情

Sass&Scss语法规则及使用方法


发布时间:2018-04-28责任编辑:朱明 浏览:640


最近咔咔建站运用sass的写法,初入门槛,收集一些语法变量等的规则,参考一二

Sass是一种css的扩展,可以使得css的编码更加强大和优雅。sass支持使用变量、条件、循环、嵌套、继承、mixin、函数等强大的功能。

Sass特点

·      对css完全兼容

·      语言扩展,例如变量、嵌套、mixins

·      拥有大量函数,可以用来操作颜色及其他属性值

·      高级特性如control directives

·      可以自定义格式化输出

sass有两种语法格式,分别以sass和scss为后缀名。scss语法一般css相同,以大括号分隔作用域,以分号来分隔属性;而sass则以缩进分隔作用域,换行分隔属性。

//scss syntax div{
  color: #ccc;
}
//sass syntaxdiv
  color: #ccc

两种语法之间可以用sass-convert命令行来转换

# Convert Sass to SCSS
$ sass-convert style.sass style.scss
 
# Convert SCSS to Sass
$ sass-convert style.scss style.sass

 


 

1. 使用Sass

sass是用ruby语言写的,因此在安装sass之前首先需要安装ruby,然后就可以用以下命令安装:

gem insall sass

将sass文件转换为css文件:

sass input.scss output.css

也可以监听sass文件的变化,并实时转换为css:

sass --watch input.scss:output.css

如果想要监听整个文件夹中的内容,也可以使用如下命令:

sass --watch app/sass:public/stylesheets

 


 

2. css扩展

2.1 嵌套选择器

sass允许嵌套使用css选择器,如下所示:

.out{
  .inner{
    color:#ccc;
  }
}

将被编译成

.out .inner {
  color: #ccc;
}

2.2 嵌套属性

css中有一大类属性是具有命名空间的,例如border-color、border-radius、border-image等。sass提供了更简洁的方法用于对这类属性的设置:

#main{
  border:{
    color: #ccc;
    radius: 3px;
    width: 1px;
  }
}

将被编译成

#main {
  border-color: #ccc;
  border-radius: 3px;
  border-width: 1px; }

2.3 &:引用父选择器

& 表示对一个父选择器的使用,有时候使用&会使得样式表达更加简介,例如使用hover属性时:

a{
  color:#1b6d85;
  &:hover{
    color: #de1d18;
  }
}

将被编译成

a {
  color: #1b6d85; }
  a:hover {
    color: #de1d18; }

&也能添加后缀来构造新的选择器,例如:

#main{
  color:#ccc;
  &-side{
    color:#aaa;
  }
}

将被编译成

#main {
  color: #ccc; }
  #main-side {
    color: #aaa; }

 


 

3. 计算

3.1 变量

sass中加入了变量,变量以美元符号$开头,例如:

$gray:#ccc;

 

并使用$来引用变量

div{
  color: $gray;}

 

如果变量在选择器外面定义,则属于全局变量,如果在选择器内部定义,则只能在该选择器作用范围内使用。当然也可以使用!global来将其声明为全局变量:

.global{
  $blue:#00f !global;}

3.2 计算

SassScript支持对数值进行算数操作,包括加(+)、减(-)、乘(*)、除(/)、取余(%)。算数操作可以保留单位,比如下面两种加法都是合法的:

.operation{
  height:1+1px;
  width:1px+1px;}

将编译成

.operation {
  height: 2px;
  width: 2px; }

但是需要注意的是对于不同单位的数值(如px和em)不能进行算数操作。

对于乘法来说,如果两个数值具有相同的单位,相乘时会生成单位的平方,但是在css中单位的平方是不允许的。

而对于除法来说,由于css中已经存在除法表达式,如10px/2px,这种表达式在输出为css不会被计算成结果,除非由括号包围,正确的使用方式是10px/2。

对于减法,使用负号(-)时需要在两边有空格。

除此之外,算数操作中也可以使用变量。

.operation{
   $width:5px;
   width: $width*2;
   height:2*2px;
   font-size: 5px - 1px;
   margin-bottom: (10px/5);
   margin-left: (10px/5px);
   margin-right: 10px/5px;
   margin-top: 2px+10px/5px;}

将被编译成

.operation {
  width: 10px;
  height: 4px;
  font-size: 4px;
  margin-bottom: 2px;
  margin-left: 2;
  margin-right: 10px/5px;
  margin-top: 4px; }

对于颜色值,rgb三个值是分开计算的,例如:

.color{
  color: #001122+#002244;}

将被计算成

.color {
  color: #003366; }

 


 

4. 表达式与函数

4.1 条件语句

条件语句以@if、@else if、@else为关键字

div {
  @if ($width>2px) {
    height: 5px;
  } @else {
    height: 10px;
  }
}

将被编译成

div {
  height: 5px; }

4.2 循环语句

循环语句有三种形式:@for、@each、@while,@for和@while与普通循环相同,@each用于遍历list和map。

@for

@for有两种形式,分别是from (start) through (end)和from (start) to (end),其区别是前者的范围是从start到end,后者的范围是从start到end-1

@for $var from 1 to 3{
  .item-#{$var}{
    width: 2px*$var;
  }
}

将被编译成

.item-1 {
  width: 2px; }
.item-2 {
  width: 4px; }

@while

$var:3;
@while $var>0{
  $var : $var - 1;
  .item-#{$var}{
    width:$var px;
  }
}

将被编译成

.item-2 {
  width: 2 px; }
.item-1 {
  width: 1 px; }
.item-0 {
  width: 0 px; }

@each

@each可用于遍历<list or map>中的变量

//遍历list@each $var in main, sider, foot {
  .#{$var}-item {
    color: #ccc;
  }
}

将被编译成

.main-item {
  color: #ccc; }
.sider-item {
  color: #ccc; }
.foot-item {
  color: #ccc; }
//遍历map@each $key, $value in (main:5px, sider:10px, foot:5px) {
  .#{$key} {
    height: $value;
  }
}

将被编译成

.main {
  height: 5px; }
.sider {
  height: 10px; }
.foot {
  height: 5px; }

4.3 函数

sass中使用@function定义函数,使用@return返回值,例如:

@function my_add($var1,$var2){
  @return $var1 + $var2;
}
div{
  width: my_add(1px,2px);}

将被编译成

div {
  width: 3px; }

需要注意的是:函数定义名称中的下划线(_)和横线(-)是等同的,即上面的使用my-add(1px,2px)也是可以的。


 

5. 样式重用

5.1 @import

使用@import可以导入其他的sass文件,例如想要导入一个foo.scss文件,由于导入的默认后缀名为.scss和.sass,因此下面两中方式均可:

@import "foo.scss";

@import "foo";

虽然@import一般都在文档的头部使用,但也可以在css规则中使用,例如

在一个for-import.scss文件中包含

.im-test{
  height: 10px;}

使用

div{
  @import "for-import";
}

将被编译成

div .im-test {
  height: 10px; }

5.2 @extend

使用@extend可以继承另一个选择器的属性,例如happy类定义了基本属性,而very-happy类在具有happy类属性的同时还增加其他属性:

.happy{
  height: 50px;
  width: 50px;
}
.very-happy{
  @extend .happy;
  background-color: #5bc0de;
}

将被编译成

.happy, .very-happy {
  height: 50px;
  width: 50px; }
.very-happy {
  background-color: #5bc0de; }

@extend的实际原理是所有继承的选择器出现的地方都应用当前选择器,例如下面所示,.happy下面的div、 hover属性都会被.very-happy继承:

.happy{
  height: 50px;
  width: 50px;
}.happy div{
  border: 1px;
}.happy:hover{
  color: #de1d18;
}.very-happy{
  @extend .happy;
  background-color: #5bc0de;
}

将被编译成

.happy, .very-happy {
  height: 50px;
  width: 50px; }
.happy div, .very-happy div {
  border: 1px; }
.happy:hover, .very-happy:hover {
  color: #de1d18; }
.very-happy {
  background-color: #5bc0de; }

此外@extend也支持多重继承、链式继承,在这里不作多述。

5.3 @mixin

@mixin-->