【美高梅开户网址】一种CSS预处理器语言,新手指南

SASS 新手指南

2013/01/26 · CSS ·
CSS

英文原稿:teamtreehouse.com,编译:w3cplus

大漠

什么是Sass?

Sass是一门格外不错的CSS预处语言,他是由Hampton
Catlin创建的。它可以减化CSS的工作流,使开发者更是便于开发,维护CSS样式。

诸如,你是还是不是在特定的样式表中查找和替换1个十六进制的水彩而闹心?只怕您正在搜寻三个总结器为多栏布局的大幅度总结而厌恶?(不用操心,Sass能帮您消除那样的困扰)。

美高梅开户网址 1

本文将介绍Sass的一对基本概念,比如说“变量”、“混合参数”、“嵌套”和“选取器继承”等。

Sass和CSS万分相像,可是在Sass中是从未有过花括号({})和分行(;)的。

如下边的CSS:

CSS

#skyscraper_ad { display: block; width: 120px; height: 600px; }
#leaderboard_ad { display: block; width: 728px; height: 90px; }

1
2
3
4
5
6
7
8
9
10
#skyscraper_ad {
  display: block;
  width: 120px;
  height: 600px;
}
#leaderboard_ad {
  display: block;
  width: 728px;
  height: 90px;
}

在Sass中,上边的CSS代码你要写成下边那样:

CSS

#skyscraper_ad display: block width: 120px height: 600px
#leaderboard_ad display: block width: 728px height: 90px

1
2
3
4
5
6
7
8
#skyscraper_ad
  display: block
  width: 120px
  height: 600px
#leaderboard_ad
  display: block
  width: 728px
  height: 90px

Sass使用多少个空格琮定义嵌套的区分。

您以往看过了Sass是何等下笔的,接下去大家共同看有的Sass方面的牵线,让Sass在您手中变得不在可怕。

变量(Variables)

在Sass中定义变量,是用“$”符号申明,然后后边跟变量名称。在那些事例中,定义变量“red”,在变量名后使用冒号(:),然后紧跟变量值:

CSS

$red: #ff4848

1
$red: #ff4848

Sass还放置了函数作用,例如变暗(darken)和变亮(lighten),他们可以支持你改改变量。

在那几个例子中,段落要使用贰个比“h1”标签更深的新民主主义革命,就足以这么使用:

CSS

$red: #ff4848 $fontsize: 12px h1 color: $red p color: darken($red,10%)

1
2
3
4
5
6
$red: #ff4848
$fontsize: 12px
h1
  color: $red
p
  color: darken($red,10%)

您也足以在一如既往的变量上做加减运算的操作。假若我们想将颜色变黑,大家也得以在变量的根基上减二个十六进制的水彩,例如“#101”。若是大家想把字号调大“10px”,大家也可以在字号的变量基础上添加那个值。

CSS

/*加法和减法*/ color: $red – #101 font-size: $fontsize + 10px

1
2
3
/*加法和减法*/
color: $red – #101
font-size: $fontsize + 10px

嵌套(Nesting)

Sass有三种嵌套规则:

采用器嵌套

接纳器嵌套是Sass嵌套规则中的第二种。

Sass的嵌套类似于你的HTML嵌套:

CSS

$fontsize: 12px .speaker .name font: weight: bold size: $fontsize + 10px
.position font: size: $fontsize

1
2
3
4
5
6
7
8
9
$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

设若您看了Sass生成的CSS,你能够见见“.name”嵌套在“.speaker”内,那里生成的CSS选取器是“.speaker
.name”。

CSS

.speaker .name { font-weight: bold; font-size: 22px; } .speaker
.position { font-size: 12px; }

1
2
3
4
5
6
7
.speaker .name {
  font-weight: bold;
  font-size: 22px;
}
.speaker .position {
  font-size: 12px;
}

性子嵌套

属性嵌套是Sass嵌套的第贰种

平等前缀的品质,你可以举行嵌套:

CSS

$fontsize: 12px .speaker .name font: weight: bold size: $fontsize + 10px
.position font: size: $fontsize

1
2
3
4
5
6
7
8
9
$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

在上头的例子中,大家有三个“font:”,在新的一条龙增添三个空格放置他的性质(常常我们看来的是选择连字符“-”来一连)。

于是大家先写“font:”属性,然后断行空两格,写“weight:”属性,在CSS中就成为了“font-weight:”属性。

CSS

.speaker .name { font-weight: bold; font-size: 22px; } .speaker
.position { font-size: 12px; }

1
2
3
4
5
6
7
.speaker .name {
  font-weight: bold;
  font-size: 22px;
}
.speaker .position {
  font-size: 12px;
}

具有连字符的采取器都协助。

那种嵌套用来协会你的CSS结构是不行棒的,可以让您不在写一些双重的代码。

混合(Mixins)

错落是Sass中另二个很理想的特色。混合可以让你定义一整块的Sass代码,甚至你可以给他俩定义参数,更酷的是你还是能安装暗中同意值。

拔取紧要词“@mixin”来定义Sass的插花,你可以你协调的喜好定义二个混合的名目。借使您必要安装有些参数,你还能将参数设置到这么些代码片段中;假设您需求安装默许值,你也得以在混合的代码片段中设置暗中认可值。

调用混合代码片段,可以动用Sass中的关键词“@include”调用,并在其背后跟上您的混合代码片段的称谓,你还能使用括号,在其间安装有些参数。

来看二个简练的例子:

CSS

@mixin border-radius($amount: 5px) -moz-border-radius: $amount
-webkit-border-radius: $amount border-radius: $amount h1 @include
border-radius(2px) .speaker @include border-radius

1
2
3
4
5
6
7
8
@mixin border-radius($amount: 5px)
  -moz-border-radius: $amount
  -webkit-border-radius: $amount
  border-radius: $amount
h1
  @include border-radius(2px)
.speaker
  @include border-radius

上边的Sass代码将转译成上边的CSS代码:

CSS

h1 { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius:
2px; } .speaker { -moz-border-radius: 5px; -webkit-border-radius: 5px;
border-radius: 5px; }

1
2
3
4
5
6
7
8
9
10
h1 {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.speaker {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

咱俩给“h1”成分指定了贰个特定的圆角值,然则并没有给“.speaker”指定其余值,因而她将利用的是暗许值“5px”。

拔取器继承

采取器的延续可以让您的选取器继承另三个选取器的有所样式风格,这是1个万分漂亮的天性。

应用拔取器的接轨,要选择Sass的严重性词“@extend”,后而跟上您要求后续的选用器,那么那一个接纳器就会继续另三个采取器的富有样式。(当然他们是有持续和被接续的关系)

CSS

h1 border: 4px solid #ff9aa9 .speaker @extend h1 border-width: 2px

1
2
3
4
5
h1
  border: 4px solid #ff9aa9
.speaker
  @extend h1
  border-width: 2px

地方的Sass代码将转译成下边的CSS代码:

CSS

h1, .speaker { border: 4px solid #ff9aa9; } .speaker { border-width:
2px; }

1
2
3
4
5
6
7
h1,
.speaker {
  border: 4px solid #ff9aa9;
}
.speaker {
  border-width: 2px;
}

尝试Sass

网上尝试

借使您的本土电脑没有设置Sass,你可以在网上品尝运用。

在转译从前,你须要选用底部的“Indented Syntax”选项。

安装

Sass是2个Ruby gem。假诺你的地面曾经安装了Ruby
gems,那么可以在您命令终端直接运营:

CSS

gem install sass

1
gem install sass

Sass也足以利用命令行工具将Sass文件转译成CSS文件。

您可以键入“sass –watch
sass_folder:stylesheets_folder”,这一个时候你的Sass文件(文件扩张名必须是.sass)stylesheets_folder就会把转译的体裁文件保存在“sass_folder”目录,当然你的sass文件必须保留在那些文件目录中。“–watch”选项的情致就是将那个目录中的sass文件转译成样式文件。

CSS转换成Sass

在存活的花色中通过“sass-convert”使用sass。

在终端进入你的目录中,键入“sass-convert –from css –to sass -兰德逍客.”。将CSS转换来Sass。其中“-CRUISER”表示递归,“.”表示当前目录。

Scss

在此处大家只介绍了Sass的语法,然后还有三个新的称号叫SCSS恐怕Sassy
CSS。不一样的是SCSS看起来更像CSS,但他也像Sass一样享有变量、混合、嵌套和采用器继承等特色。

总结

在您团队和保管CSS时,Sass真的很完美。还有个系列Compass,它在CSS框架中运用混合形式,而不是去修改你的HTML结构依旧再一次定义你的类名。

那你还在等如何呢?在您的下五个品类中就尝试选择Sass吧。

赞 2 收藏
评论

美高梅开户网址 2

![]()

scss的语法十三分简单:

1.webstorm 自动编译SASS
  下载安装包
  然后点击安装,路径为暗许路径就行, 勾选以下两项
    add Ruby executables to your PATH
    Associate .rb and rbw files with this Ruby information
  安装完,打开命令行 输入 gem install sass
  webstorm 配置 点击setting选择tool下的file watcher 如下图:

$color: red;

   美高梅开户网址 3

Sass是一种CSS预处理器语言,通过编程格局生成CSS代码。因为可编程,所以操控灵活性自由度高,方便完成部分平素编写CSS代码较困难的代码。
还要,因为Sass是生成CSS的语言,所以写出来的Sass文件是不大概一直用的,必须透过编译器编译成CSS文件才能动用。

div{

  美高梅开户网址 4

## Sass有啥样便宜?
Sass的严重性特征如下:变量、嵌套、导入、混合、继承、运算、函数。那么些特色为编制CSS参加编程控制的力量。

color: $color;

  美高梅开户网址 5

## 怎么样开始选用Sass
直接使用任何公文或代码编辑器都得以起来编制Sass代码,要将Sass文件转换为CSS文件,则需利用Sass命令行编译器或桌面集成编译软件。
**安装Sass编译器**
Sass编译器使用Ruby环境,所以地方安装使用Sass编译器此前须要有Ruby环境,Ruby安装另见…
Ruby环境准备甘休后,使用gem安装Sass:
`gem install sass`

}

  

##Sass语法
#### 先分清sass与scss
Sass使用sass和scss那三种后缀名以分别不一样的语法格式:
– sass与普通CSS的语法格式分歧较大,其不应用花括号和分公司。
– scss接近一般CSS的语法格式,使用与CSS相同的花括号和支行。
切实要利用哪一种格式,

那就是三个简单易行的scss代码。

2.SCSS 和 Sass 的区别。
    SCSS 是 Sass
引入新的语法,其语法完全协作css3,并且两次三番了Sass的雄强的功用,SCSS
是CSS的极品(扩大),

在sass格式中,撤除花括号,改为使用三个空格缩进嵌套;打消分号,以行分隔。
以下sass代码:
“`sass
#div1
  width:50px
  height:30px
“`
编译后为如下css代码:
“`css
#div1{
width:50px;
height:50px;
}
“`

不过,使用 Sass
举行支付,那么是或不是一贯通过“<link>”引用“.scss”或“.sass”文件呢?显明是可怜的,因为浏览器只可以解析css文件,所以在利用的时候须求对scss文件进行编译。当然编译方法有成百上千,可以运用sass命令,也足以运用webpack,fis3等局地代码打包工具。

      由此,全部在CSS 中健康办事的代码也能在SCSS 中平常的行事。

接纳器嵌套
“`sass
#sample
  .span
    font-size:12px
    font-weight:bold
“`

Tips:相对于scss,sass语法比较严格而且语法不太简单被前端开发者所承受,所以在末端都是scss来教学。

3. 运用变量:
    变量注明 $highlight-color: #f90;
即便1个变有多少个值可以用逗号分隔。如:
      $plain-font: “Myriad Pro”、Myriad、”Helvetica Neue”;
    当变量定义在css 规则内,那么该变量只幸好此规则内使用
      变量引用: 例如:
        $highlight-color: #F90;
        .selected {
            border: 1px solid $highlight-color;
          }
        //编译后
        .selected {
            border: 1px solid #F90;
          }
      变量名用中写道依然下划线
      中写道命名的内容和下划线命名的情节是互通的
        $link-color: blue;
          a {
            color: $link_color;
          }
        //编译后
         a {
            color: blue;
        }

质量嵌套
涵盖相同前缀的属性可开展嵌套
“`sass
#sample
  font:
    size:12px
    weight:bold
“`

sass命令编译

4.嵌套css 规则
    #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 }
  父采取器的标识符&;
    &符号,可以放在其余1个采取器可以出现的地点。
      article a {
          color: blue;
          &:hover { color: red }
        }
      /* 编译后 */
      article a{color:blue}
      article a:hover {color: red}
  群组采用器的嵌套
    .container {
        h1, h2, h3 {margin-bottom: .8em}
    }
      /*【美高梅开户网址】一种CSS预处理器语言,新手指南。 编译后 */
    .container h1, .container h2, .container h3 { margin-bottom:
.8em }
  内嵌在群组中的拔取器:
    nav, aside {
      a {color: blue}
    }
      /* 编译后 */
    nav a, aside a {color: blue}
  子组合选用器和同组合选拔器 : > , + 和 ~ ;
    article section { margin: 5px }
      采用article 下的兼具的命名中的 section 接纳器的因素。
    article > section { border: 1px solid #ccc }
      采纳器只会挑选article
下紧跟着的子成分中命名section拔取器的要素。
    header + p { font-size: 1.1em }
      接纳同层相邻的采取器,选取header 前面紧跟着的p 成分。
    article ~ article { border-top: 1px dashed #ccc }
  同层全体组成选取器,采用具有article 后的同层article成分。

变量
“`sass
$red:#f00
h1
  color:$red
“`

scss
<要编译的Scss文件路径>/style.scss:<要出口CSS文件路径>/style.css

    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 }

函数
“`sass
.div1
  color:darken($red,10%)
  background:lighten($red,10%)
“`

多文件编译

5.导入SASS 文件
  使用sass的@import规则并不要求指明被导入文本的全名。
  你可以省略.sass或.scss文件后缀
  举例来说,@import”sidebar”;那条命令将把sidebar.scss
  文件中享有样式添加到眼下体制表中

表达式
“`saaa
p
  color:$red – #101
  font-size:$fontsize+10px;
“`

scss <要编译的Scss文件路径>/ :<要出口CSS文件路径>/

  当您@import1个片段文件时,还是可以不写文件的全名,
  即省略文件名初叶的下划线 举例来说,你想导入
  themes/_night-sky.scss这几个局地文件里的变量,
  你只需在样式表中写@import “themes/night-sky”;。
  暗许变量值:
    在形似的气象下,反复生命多少个值,最终几次生命会覆盖前边
    的声明。
  强制覆盖 !default ,用于变量。
    例如:
      $fancybox-width: 400px !default;
      .fancybox {
        width: $fancybox-width;
      }
  嵌入导入:
    sass 允许@import 命令写在css
规则内,那种导入格局下,生产的css文件是,局地
    文件会被插入到css
规则内导入它的地点,举个例子,3个名为_blue-theme.scss
    的局部文件,内容如下。
      aside {
        background: blue;
        color: white;
      }
      .blue-theme {@import “blue-theme”}
      //生成的结果跟你直接在.blue-theme接纳器内写_blue-theme.scss文件
        的故事情节完全等同。
      . blue-theme {
          aside {
            background: blue;
            color: #fff;
          }
      }
  原生的CSS导入
    由于sass 包容原生的css 所以它支持原生的css@import
      ● 被导入文本的名字以.css结尾;
      ●
被导入文本的名字是1个UEvoqueL地址(比如
      ● 被导入文本的名字是CSS的url()值。
6.静默注释
  sass 其余提供了一种差距于css 的评释。它以 //
伊始,注释内容直到末行。
    body {
      color: #333; // 那种注释内容不会现身在翻云覆雨的css文件中
      padding: 0; /* 那种注释内容会并发在变更的css文件中 */
    }

混合
录取代码
行使@mixin关键字定义混合代码,使用@include使用混合代码
@mixin后边是概念混合的名字
“`sass
@mixin border-radius($amount:5px)
-moz-border-radius:$amount
-webkit-border-radius:$amount
border-radius:$amount
h1
@include border-radius(2px)
.speaker
@include border-radius
“`
从未提交参数,会动用安装的暗中认同值

那般会把公文夹下全部的.scss 文件 全体编译成css

7.混合器:
  混合器使用@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;
    }
      //sass最毕生成:
    .notice {
      background-color: green;
      border: 2px solid #00aa00;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }

采纳器继承
运用@extend前边跟要继承的选拔器
“`sass
h1
border:4px solid #f00
.speaker
@extend h1
border-width:2px
“`

 

  给混合器传参:
    通过在@include
混合器时给混合器传参,来指定混合器生成的准确样式,当
      @include 混合器时,参数其实就是足以给css 属性值的变量。
      @mixin link-colors($normal,$hover,$visited) {
          color: $normal;
          $:hover {color:$hover;}
          $:visited {color:$visited;}
      }

症结及缓解格局:

    当混合器被@include 时,你可以把它作为二个css 函数来传参。
      a{
        @include link-colors(blue, red,green)
      }
      // Sass 最平生成的是
      a{color:blue;}
      a:hover {color:red;}
      a:visited { color: green;}
    sass 允许通过语法 $name:value
的样式指定各个参数的值,那种样式,
    的传参,参数顺序就无须在乎了,只要保障没有遗漏参数即可。
    a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover:red
      );
    }

在其实编译进程中,你会发现上边的下令,只可以一回性编译。每便本性保存“.scss”文件从此,都得重新履行五回那样的通令。如此操作太难为,其实还有一种方法,就是在编译
Sass
时,开启“watch”功效,那样一旦您的代码进行任保修改,都能活动监测到代码的变化,并且给您向来编译出来:

  暗中认可参数值:
      为了在@include
混合器时传出全部的参数,大家可以给参数制定二个暗许值。
      参数暗中认同值使用: $name: default-value 的性命方式。
      @mixin link-colors(
        $normal,
        $hover: $normal,
        $visited: $normal
      )
      {
        color: $normal;
        $:hover { color: $hover;}
        $:visited { color: $visited;}
      }
    假若这么调用: @include link-colors(red) $hover 和$visited
      也会自行赋值为red.
8.采用器继承
    通过@extend 语法完成
    // 通过接纳器继承样式
      .error {
        border: 1px red;
        background-color: #fdd;
      }
      .seriousError {
        @extend .error;
        border-width: 3px;
      }

sass –watch
<要编译的Sass文件路径>/style.scss:<要出口CSS文件路径>/style.css

 

 

今非昔比风格的输出方法:

  1. 嵌套输出格局 nested
  2. 进展输出方式 expanded   最直观的表明方式
  3. 紧密输出情势 compact  在同一行展现
  4. 调减输出格局 compressed 压缩式

动用方式: sass –watch test.scss:test.css –style nested

一向在命令行前边加上要出口的花色

 

Sass 的调试

美高梅开户网址 6

(单击可放大)

Sass 调试一直以来都是一件高烧的事体,使用 Sass
的同室都梦想能在浏览器中间接调试 Sass
文件,能找到相应的行数。值得庆幸的是,以后贯彻并不是一件难事,只要您的浏览器帮助“sourcemap”成效即可。早一点的版本,必要在编译的时候添加“–sourcemap” 
参数:

sass –watch –scss –sourcemap style.scss:style.css

在 Sass3.3 版本之上(作者测试使用的版本是
3.4.7),不须求丰硕这么些参数也得以:

sass –watch style.scss:style.css

在命令终端,你将见到二个新闻:

>>> Change detected to: style.scss

  write style.css

  write style.css.map

此刻你就足以像后边体现的 gif 图一样,调试你的 Sass 代码.

 

 

scss的使用

scss 申明变量

美高梅开户网址 7

eg: $color: red ;

div{

color: $color;

}

 

 

平常变量与默许变量

平时变量

概念之后方可在大局范围内使用。

$fontSize: 12px; body{ font-size:$fontSize; }

编译后的css代码:

body{ font-size:12px; }

 

默许变量

scss 的暗许变量仅必要在值前面加上 !default 即可。

$baseLineHeight:1.5 !default; body{ line-height: $baseLineHeight; }

编译后的css代码:

body{ line-height:1.5; }

 

scss
的私自认同变量一般是用来安装默许值,然后依照须求来掩盖的,覆盖的措施也很简短,只须要在暗中同意变量以前再度表明下变量即可。

 

$baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height:
$baseLineHeight; }

编译后的css代码:

body{ line-height:2; }

 

可以看出现在编译后的 line-height 为 2,而不是大家默许的
1.5。暗中认同变量的价值在展开组件化开发的时候会尤其有效。

 

 

scss局地变量和全局变量

scss
中变量的效能域在过去几年已经爆发了有个别改变。直到目前,规则集和其他限制内表明变量的效益域才默许为当地。假若已经存在同名的全局变量,从 3.4
版本初阶,Sass
已经足以正确处理成效域的定义,并通过创设贰个新的有个别变量来顶替。

全局变量与一些变量

先来看一下代码例子:

//SCSS $color: orange
!default;//定义全局变量(在采取器、函数、混合宏…的外场定义的变量为全局变量)
.block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量
a { color: $color;//调用部分变量 } } span { color: $color;//调用全局变量
}

css 的结果:

//CSS .block { color: orange; } em a { color: red; } span { color:
orange; }

上边的示范演示可以摸清,在要素内部定义的变量不会影响其余因素。如此可以简单的知晓成,全局变量就是概念在要素外面的变量,如下代码:

$color:orange !default;

$color 就是壹个全局变量,而定义在要素内部的变量,比如 $color:red;
是多个有些变量。

除开,Sass 未来还提供1个 !global 参数。!global 和 !default
对于定义变量都以很有扶持的。我们今后将会详细介绍那八个参数的行使以及其效果。

全局变量的阴影

当在有些范围(选拔器内、函数内、混合宏内…)声圣元(Synutra)(Beingmate)(Aptamil)个早已存在于大局范围内的变量时,局地变量就改成了全局变量的阴影。基本上,局地变量只会在一些范围内覆盖全局变量。

地点例子中的 em 接纳器内的变量 $color 就是1个全局变量的阴影。

//SCSS $color: orange !default;//定义全局变量 .block { color:
$color;//调用全局变量 } em { $color: red;//定义局地变量(全局变量 $color
的阴影) a { color: $color;//调用一些变量 } }

哪些时候表明变量?

本人的提出,创造变量只适用于感觉确有须要的地方下。不要为了一点骇客行为而申明新变量,那丝毫不曾效果。唯有满意全体下述标准时方可创制新变量:

  1. 该值至少重复出现了一次;
  2. 该值至少或然会被更新一回;
  3. 该值全部的变现都与变量有关(非巧合)。

大多,没有理由声喜宝(Beingmate)(Karicare)个千古不需求创新或许只在单纯地点使用变量。

协调小提醒:您在学习 sass
时,除了在大家网页上得以做锻炼,还有一个便于在线编辑器网址如下:

 

scss嵌套-采用器嵌套

scss 中还提供了拔取器嵌套功用,但那也并不意味着你在 scss
中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS
代码的选用器层级将越深,那往往是豪门不甘于看看的一些。那个特点今后正被很多开发者滥用。

选取器嵌套为样式表的撰稿人提供了一个由此一些选取器互相嵌套完结全局接纳的办法,Sass
的嵌套分为三种:

  • 选用器嵌套
  • 天性嵌套
  • 伪类嵌套

1、采取器嵌套

只要我们有一段那样的结构:

<header> <nav> <a href=“##”>Home</a> <a
href=“##”>About</a> <a href=“##”>Blog</a>
</nav> <header>

想选中 header 中的 a 标签,在写 CSS 会那样写:

nav a { color:red; } header nav a { color:green; }

那就是说在 scss 中,就可以动用接纳器的嵌套来完结:

nav { a { color: red; header & { color:green; } } }

 

 

 

scss嵌套-属性嵌套

scss 中还提供属性嵌套,CSS
有部分质量前缀相同,只是后缀不等同,比如:border-top/border-right,与这几个就像的还有
margin、padding、font 等本性。若是你的体裁中用到了:

.box { border-top: 1px solid red; border-bottom: 1px solid green; }

在 scss 中我们得以这么写:

.box { border: { top: 1px solid red; bottom: 1px solid green; } }

 

 

scss嵌套-伪类嵌套

实质上伪类嵌套和性质嵌套卓殊接近,只不过他须求借助`&`标记一起协作使用。大家就拿经典的“clearfix”为例吧:

.clearfix{ &:before, &:after { content:””; display: table; } &:after {
clear:both; overflow: hidden; } }

编译出来的 CSS:

clearfix:before, .clearfix:after { content: “”; display: table; }
.clearfix:after { clear: both; overflow: hidden; }

防止选拔器嵌套:

  • 选取器嵌套最大的题材是将使末段的代码难以阅读。开发者需求费用巨大活力总计差异缩进级别下的接纳器具体的显示效用。
  • 挑选器越具体则表明语句越冗长,而且对如今拔取器的引用(&)也越频仍。在少数时候,出现混淆采用器路径和探索下超级接纳器的错误率很高,那不行不值得。

为了防备此类情形,大家应该尽量幸免拔取器嵌套。但是,分明只有个别状态适应这一艺术。

 

scss混合宏-注解混合宏

假如你的方方面面网站中有几处小样式类似,比如颜色,字体等,在scss
可以使用变量来统一处理,那么那种接纳如故不错的。但当你的体裁变得愈加复杂,须要重复使用大段的样式时,使用变量就不能达到我们目了。那一个时候
scss 中的混合宏就会变得那一个有意义。在这一节中,紧要向大家介绍 scss
的混合宏。

一,申明混合宏

不带参数混合宏:

在 scss 中,使用“@mixin”来声称多个混合宏。如:

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

其间 @mixin 是用来声称混合宏的第1、词,有点类似 CSS 中的
@media、@font-face
一样。border-radius 是混合宏的名号。大括号里面是复用的体裁代码。

带参数混合宏:

除开声美素佳儿(Friso)个不带参数的混合宏之外,还是能在概念混合宏时带有参数,如:

@mixin border-radius($radius:5px){ -webkit-border-radius: $radius;
border-radius: $radius; }

复杂的混合宏:

地点是3个简易的概念混合宏的方法,当然, scss
中的混合宏还提供进一步复杂的,你可以在大括号里面写上含蓄逻辑关系,协助更好的做你想做的工作,如:

@mixin box-shadow($shadow…) { @if length($shadow) >= 1 { @include
prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow); } }

其一 box-shadow
的混合宏,带有三个参数,那些时候可以利用“ … ”来顶替。简单的解释一下,当
$shadow 的参数数量值大于或等于“ 1
”时,表示有多少个阴影值,反之调用默许的参数值“ 0 0 4px rgba(0,0,0,.3) ”。

 

 

scss混合宏-调用混合宏

在 scss 中经过 @mixin
关键词声明了三个混合宏,那么在事实上调用中,其匹配了壹个着重词“@include”来调用注脚好的混合宏。例如在您的样式中定义了一个圆角的混合宏“border-radius”:

@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; }

在二个按钮中要调用定义好的混合宏“border-radius”,可以这样使用:

button { @include border-radius; }

以此时候编译出来的 CSS:

button { -webkit-border-radius: 3px; border-radius: 3px; }

 

scss混合宏的参数–传一个不带值的参数

scss 的混合宏有一个强劲的效应,可以传参,那么在 scss
中传参紧要有以下二种情景:

A) 传多个不带值的参数

在混合宏中,能够传三个不带任何值的参数,比如:

@mixin border-radius($radius){ -webkit-border-radius: $radius;
border-radius: $radius; }

在混合宏“border-radius”中定义了壹个不带任何值的参数“$radius”。

在调用的时候可以给那一个混合宏传3个参数值:

.box { @include border-radius(3px); }

此地表示给混合宏传递了3个“border-radius”的值为“3px”。

编译出来的 CSS:

.box { -webkit-border-radius: 3px; border-radius: 3px; }

 

scss混合宏的参数–传一个带值的参数

在scss 的交集宏中,还足以给混合宏的参数传七个暗中同意值,例如:

@mixin border-radius($radius:3px){ -webkit-border-radius: $radius;
border-radius: $radius; }

在混合宏“border-radius”传了四个参数“$radius”,而且给这几个参数赋予了3个暗许值“3px”。

在调用类似这样的混合宏时,会多有二个空子,假如你的页面中的圆角很多地点都以“3px”的圆角,那么这一个时候只须求调用默许的混合宏“border-radius”:

.btn { @include border-radius; }

编译出来的 CSS:

.btn { -webkit-border-radius: 3px; border-radius: 3px; }

但部分时候,页面中有个别成分的圆角值差距,那么可以肆意给混合宏传值,如:

.box { @include border-radius(50%); }

编译出来的 CSS:

.box { -webkit-border-radius: 50%; border-radius: 50%; }

 

 

scss混合宏的参数–传三个参数

scss 混合宏除了能传三个参数之外,还足以传五个参数,如:

@mixin center($width,$height){ width: $width; height: $height; position:
absolute; top: 50%; left: 50%; margin-top: -($height) / 2; margin-left:
-($width) / 2; }

在混合宏“center”就传了七个参数。在实质上调用和其调用别样混合宏是千篇一律的:

.box-center { @include center(500px,300px); }

编译出来 CSS:

.box-center { width: 500px; height: 300px; position: absolute; top: 50%;
left: 50%; margin-top: -150px; margin-left: -250px; }

  有1个越发的参数“…”。当混合宏传的参数过多之时,能够采纳参数来顶替,如:

@mixin box-shadow($shadows…){ @if length($shadows) >= 1 {
-webkit-box-shadow: $shadows; box-shadow: $shadows; } @else { $shadows:
0 0 2px rgba(#000,.25); -webkit-box-shadow: $shadow; box-shadow:
$shadow; } }

在事实上调用中:

.box { @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px
rgba(#000,.2)); }

编译出来的CSS:

.box { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0,
0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0,
0, 0.2); }

 

 

scss混合宏的参数–混合宏的供不应求

混合宏在其实编码中给大家带来众多有益之处,尤其是对于复用重复代码块。但其最大的不足之处是会扭转冗余的代码块。比如在差别的地点调用3个一致的搅和宏时。如:

@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; }
.box { @include border-radius; margin-bottom: 5px; } .btn { @include
border-radius; }

演示在“.box”和“.btn”中都调用了概念好的“border-radius”混合宏。先来看编译出来的
CSS:

.box { -webkit-border-radius: 3px; border-radius: 3px; margin-bottom:
5px; } .btn { -webkit-border-radius: 3px; border-radius: 3px; }

 

上例明显可以看到,scss
在调用相同的混合宏时,并不大概智能的将一律的体制代码块合并在同步。那也是scss
的混合宏最不足之处。

 

 

scss扩展/继承

接轨对于精晓 CSS 的校友来说一点都不不熟悉,先来看一张图:

美高梅开户网址 8

图中代码呈现“.col-sub .block li,.col-extra .block li” 继承了 “.item-list
ul li”选拔器的 “padding : 0;” 和 “ul li” 选用器中的 “list-style : none
outside none;”以及 * 采取器中的 “box-sizing:inherit;”。

在scss 中也拥有持续一说,也是继承类中的样式代码块。在 Sass
中是透过重大词
“@extend”来一连已存在的类样式块,从而已毕代码的继续。如下所示:

//SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size:
14px; } .btn-primary { background-color: #f36; color: #fff; @extend
.btn; } .btn-second { background-color: orange; color: #fff; @extend
.btn; }

编译出来今后:

//CSS .btn, .btn-primary, .btn-second { border: 1px solid #ccc;
padding: 6px 10px; font-size: 14px; } .btn-primary { background-color:
#f36; color: #fff; } .btn-second { background-clor: orange; color:
#fff; }

从示例代码可以看到,在 Sass
中的继承,可以继承类样式块中享有样式代码,而且编译出来的 CSS
会将采取器合并在联合,形成组合选拔器:

.btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px
10px; font-size: 14px; }

 

 

scss占位符 %placeholder

scss 中的占位符 %placeholder
作用是二个很强劲,很实用的1个效果,那也是本身这一个喜欢的机能。他得以取代在此以前CSS 中的基类造成的代码冗余的情形。因为 %placeholder 表明的代码,如果不被
@extend 调用的话,不会爆发其余代码。来看三个示范:

%mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; }

那段代码没有被 @extend
调用,他并从未生出任何代码块,只是静静的躺在你的某些 SCSS
文件中。唯有经过 @extend 调用才会生出代码:

//SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn {
@extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend
%pt5; } }

编译出来的CSS

//CSS .btn, .block { margin-top: 5px; } .btn, .block span { padding-top:
5px; }

从编译出来的 CSS 代码可以见到,通过 @extend
调用的占位符,编译出来的代码会将同样的代码合并在协同。那也是我们期待见到的功能,也让你的代码变得愈加彻底。

 

 

scss混合宏 VS 继承 VS 占位符

初学者都隔三差五纠结于这些题材“什么日期用混合宏,几时用三番五次,曾几何时使用占位符?”其实她们各有各的助益与缺点,先来探视他们使用效果:

a) scss 中的混合宏使用

编译出来的 CSS 见右边结果窗口。

小结:编译出来的 CSS
清晰告诉了大家,他不会活动合并相同的体制代码,借使在体制文件中调用同三个混合宏,会发出几个照应的体裁代码,造成代码的冗余,那也是
CSSer 不能忍受的一件事情。然则她并不是一无事处,他得以传参数。

民用提议:假设您的代码块中关系到变量,指出采取混合宏来创设相同的代码块。

b) scss 中继承

同一的,将地点代码中的混合宏,使用类名来表示,然后通过三番五次来调用:

小结:使用持续后,编译出来的 CSS
会将使用持续的代码块合并到一同,通过结合接纳器的方法向大家显示,比如
.mt, .block, .block span, .header, .header
span。那样编译出来的代码相对于混合宏来说要根本的多,也是 CSSer
期望看到。可是她无法传变量参数。

个人提出:若是您的代码块不要求专任何变量参数,而且有多少个基类已在文书中留存,那么提出选择scss
的持续。

c) 占位符

最后来看占位符,将地点代码中的基类 .mt 换来 scss 的占位符格式:

小结:编译出来的 CSS
代码和拔取持续基本上是相同,只是不会在代码中变化占位符 mt
的选取器。那么占位符和继承的重中之重区其余,“占位符是独立定义,不调用的时候是不会在
CSS
中爆发其它代码;继承是率先有二个基类存在,不管调用与不调用,基类的体裁都将会冒出在编译出来的
CSS 代码中。”

来看多个表格:

美高梅开户网址 9

 

 

scss插值#{}

动用 CSS 预处理器语言的一个最首要缘由是想采纳 scss
得到多个更好的结构系列。比如说你想写更干净的、高效的和面向对象的
CSS。scss
中的插值(Interpolation)就是主要的一局地。让大家看一下底下的例证:

$properties: (margin, padding); @mixin set-value($side, $value) { @each
$prop in $properties { #{$prop}-#{$side}: $value; } } .login-box {
@include set-value(top, 14px); }

它可以让变量和质量工作的很周详,下边的代码编译成 CSS:

.login-box { margin-top: 14px; padding-top: 14px; }

那是 scss
插值中多少个简易的实例。当您想设置属性值的时候你可以动用字符串插入进来。另二个可行的用法是营造二个选用器。可以如此使用:

@mixin generate-sizes($class, $small, $medium, $big) { .#{$class}-small
{ font-size: $small; } .#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; } } @include
generate-sizes(“header-text”, 12px, 20px, 40px);

编译出来的 CSS:

.header-text-small { font-size: 12px; } .header-text-medium { font-size:
20px; } .header-text-big { font-size: 40px; }

如若你意识那或多或少,你就会想到一流酷的 mixins,用来变化代码或然生成另3个mixins。可是,那并不完全是唯恐的。第2个限制,那或然会很删除用于 scss
变量的插值。

$margin-big: 40px; $margin-medium: 20px; $margin-small: 12px; @mixin
set-value($size) { margin-top: $margin-#{$size}; } .login-box {
@include set-value(big); }

地点的 scss 代码编译出来,你会收获上边的音讯:

error style.scss (Line 5: Undefined variable: “$margin-“.)

所以,#{}语法并不是所在可用,你也不恐怕在 mixin 中调用:

@mixin updated-status { margin-top: 20px; background: #F00; } $flag:
“status”; .navigation { @include updated-#{$flag}; }

上边的代码在编译成 CSS 时一致会报错:

error style.scss (Line 7: Invalid CSS after “…nclude updated-“:
expected “}”, was “#{$flag};”)

碰巧的是,能够采取 @extend 中使用插值。例如:

%updated-status { margin-top: 20px; background: #F00; }
.selected-status { font-weight: bold; } $flag: “status”; .navigation {
@extend %updated-#{$flag}; @extend .selected-#{$flag}; }

 

地点的 scss 代码是足以运作的,因为她给了大家能力,可以动态的插入 .class
和 %placeholder。当然他们没办法经受像 mixin
那样的参数,上边的代码编译出来的 CSS:

.navigation { margin-top: 20px; background: #F00; } .selected-status,
.navigation { font-weight: bold; }

 

scss注释

声明对于一名程序员来说,是极其紧要,卓越的注释能扶助协调恐怕别人阅读源码。在
scss 中注释有三种办法,小编权且将其命名为:

一,类似 CSS 的诠释格局,使用 ”/* ”起始,结属使用 ”*/ ”

二,类似 JavaScript 的表明格局,使用“//”

两边分别,前者会在编译出来的 CSS 展现,后者在编译出来的 CSS
中不会显得,来看一个示范:

//定义三个占位符 %mt5 { margin-top: 5px; } /*调用3个占位符*/ .box {
@extend %mt5; }

编译出来的CSS

.box { margin-top: 5px; } /*调用2个占位符*/

 

 

 

scss数据类型

 scss 和 JavaScript 语言类似,也存有友好的数据类型,在 Sass
中隐含以下二种数据类型:

  •  数字: 如,1、 2、 13、 10px;
  •  字符串:有引号字符串或无引号字符串,如,”foo”、 ‘bar’、 baz;
  •  颜色:如,blue、 #04a3f9、rgba(255,0,0,0.5);
  •  布尔型:如,true、 false;
  •  空值:如,null;
  •  值列表:用空格可能逗号分开,如,1.5em 1em 0 2em 、 Helvetica,
    Arial, sans-serif。

 

SassScript 也帮忙其余 CSS 属性值(property value),比如 Unicode
范围,或 !important 申明。可是,Sass
不会尤其对待这个属性值,一律视为无引号字符串 (unquoted strings)。

 

 

scss字符串

SassScript 帮衬 CSS 的二种字符串类型:

  • 有引号字符串 (quoted strings),如 “Lucida
    Grande” 、’
  • 无引号字符串 (unquoted strings),如 sans-serifbold。

在编译 CSS 文件时不会改变其项目。唯有一种景况各异,使用 #{ }插值语句
(interpolation)
时,有引号字符串将被编译为无引号字符串,那样方便了在混合指令 (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!”; }

须要专注的是:当 deprecated = property syntax 时
(权且不知晓是什么的场地),全数的字符串都将被编译为无引号字符串,不论是不是采取了引号。

 

 

scss值列表

所谓值列表 (lists) 是指 scss 怎么样处理 CSS 中: 

margin: 10px 15px 0 0

或者: 

font-face: Helvetica, Arial, sans-serif

像上边这样经过空格或者逗号分隔的一文山会海的值。

实际,独立的值也被视为值列表——只包蕴一个值的值列表。

scss列表函数(scss list functions)赋予了值列表更加多效益:

  1. nth函数(nth function) 可以平昔访问值列表中的某一项;
  2. join函数(join function) 可以将七个值列表连结在联合;
  3. append函数(append function) 可以在值列表中添加值; 
  4. @each规则(@each rule) 则可以给值列表中的每一种门类增进样式。

值列表中得以再包括值列表,比如 1px 2px, 5px 6px 是含有 1px 2px 与 5px
6px
五个值列表的值列表。假诺前后两层值列表使用同一的相间格局,要用圆括号包裹内层,所以也能够写成
(1px 2px) (5px 6px)。当值列表被编译为 CSS 时,scss
不会添加任何圆括号,因为 CSS 不相同意那样做。(1px 2px) (5px 6px)与 1px 2px
5px 6px 在编译后的 CSS 文件中是同一的,可是它们在 scss
文件中却有例外的意义,前者是富含七个值列表的值列表,而后人是包括三个值的值列表。

可以用 () 表示空的列表,那样不得以一直编译成 CSS,比如编译 font-family:
()时,scss
将会报错。若是值列表中隐含空的值列表或空值,编译时将免除空值,比如 1px
2px () 3px 或 1px 2px null 3px。

$linkColor: #08c #333 !default;

$bdcolor:#c30 #f60;

a{

color:nth($linkColor,1);

 

&:hover{

color:nth($linkColor,2);

border-style:dashed;

border-width:2px;

border-color:join($linkColor,$bdcolor);

}

}

编译后:

a {

color: #08c;

}

a:hover {

color: #333;

border-style: dashed;

border-width: 2px;

border-color: #08c #333 #c30 #f60;

}

 

 

scss运算-加法

程序中的运算是周边的一件事情,但在 CSS 中能做运算的,到近期截止仅有
calc() 函数可行。但在scss 中,运算只是其基本特色之一。在 Sass
中得以做各个数学计算,在接下去的章节中,主要和豪门一同探索有关于 scss
中的数学运算。

(一)、加法

加法运算是 Sass 中运算中的一种,在变量或性质中都可以做加法运算。如:

.box { width: 20px + 8in; }

编译出来的 CSS:

.box { width: 788px; }

但对于指引不一样档次的单位时,在 Sass 中总括会报错,如下例所示:

.box { width: 20px + 1em; }

编译的时候,编译器会报错:“Incompatible units: ’em’ and ‘px’.”

 

 

 

scss运算-减法

scss 的减法运算和加法运算类似,大家透过3个简练的言传身教来做演说:

$full-width: 960px; $sidebar-width: 200px; .content { width: $full-width

  • $sidebar-width; }

编译出来的 CSS 如下:

.content { width: 760px; }

平等的,运算时遇见分歧门类的单位时,编译也会报错,如:

$full-width: 960px; .content { width: $full-width – 1em; }

编译的时候,编译器报“Incompatible units: ’em’ and ‘px’.”错误。

 

 

scss运算-乘法

scss
中的乘法运算和前边介绍的加法与减法运算还略有不相同。即使他也可以援救二种单位(比如
em ,px , %),但当多个单位还要评释三个值时会有标题。比如上边的言传身教:

.box { width:10px * 2px; }

编译的时候报“20px*px isn’t a valid CSS value.”错误音信。

若果展开乘法运算时,五个值单位相同时,只需求为壹个数值提供单位即可。上面的演示能够修改成:

.box { width: 10px * 2; }

编译出来的 CSS:

.box { width: 20px; }

Sass
的乘法运算和加法、减法运算一样,在运算中有两样品类的单位时,也将会报错。如下边的言传身教:

.box { width: 20px * 2em; }

编译时报“40em*px isn’t a valid CSS value.”错误音信。

 

scss运算-除法

scss
的乘法运算规则也适用于除法运算。不过除法运算还有2个奇异之处。人人皆知“/”符号在
CSS 中已做为一种标志使用。由此在 scss
中做除法运算时,直接运用“/”符号做为除号时,将不会收效,编译时既得不到大家必要的效果,也不会报错。一初步来看二个总结的言传身教:

.box { width: 100px / 2; }

编译出来的 CSS 如下:

.box { width: 100px / 2; }

这样的结果对于豪门来说没有此外意义。要更正这一个难题,只须要给运算的外场添加贰个小括号(
)即可:

.box { width: (100px / 2); }

编译出来的 CSS 如下:

.box { width: 50px; }

而外上边意况带有小括号,“/”符号会作为除法运算符之外,借使“/”符号在已某个数学表明式中时,也会被认作除法符号。如上边示例:

.box { width: 100px / 2 + 2in; }

编译出来的CSS:

.box { width: 242px; }

除此以外,在 scss
除法运算中,当用变量进行除法运算时,“/”符号也会活动被识别成除法,如下例所示:

$width: 1000px; $nums: 10; .item { width: $width / 10; } .list { width:
$width / $nums; }

编译出来的CSS:

.item { width: 100px; } .list { width: 100px; }

归咎上述,”/  ”符号被当作除法运算符时有以下两种状态:

•    若是数值或它的人身自由部分是储存在1个变量中或许函数的再次来到值。

•    如果数值被圆括号包围。

•    假诺数值是另2个数学表明式的一有的。

如下所示:

//SCSS p { font: 10px/8px; // 纯 CSS,不是除法运算 $width: 一千px;
width: $width/2; // 使用了变量,是除法运算 width: round(1.5)/2; //
使用了函数,是除法运算 height: (500px/2); // 使用了圆括号,是除法运算
margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算 }

编译出来的CSS

p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; }

 

scss
的除法运算还有贰个动静。我们先想起一下,在乘法运算时,如若多个值带有相同单位时,做乘法运算时,出来的结果并不是我们要求的结果。但在除法运算时,如若多少个值带有相同的单位值时,除法运算之后会博得一个不带单位的数值。如下所示:

.box { width: (1000px / 100px); }

编译出来的CSS如下:

.box { width: 10; }

 

scss运算-变量计算

在 scss
中除去可以行使数值举行演算之外,还能动用变量进行计算,其实在眼下章节的演示中也或多或少的向大家来得了。在
scss 中使用变量进行测算,那使得 scss
的数学运算功用变得特别实用。一起来看二个大约的演示:

$content-width: 720px; $sidebar-width: 220px; $gutter: 20px; .container
{ width: $content-width + $sidebar-width + $gutter; margin: 0 auto; }

编译出来的CSS

.container { width: 960px; margin: 0 auto; }

 

scss运算-数字运算

在 Sass
运算中数字运算是较为广泛的,数字运算包含前面介绍的:加法、减法、乘法和除法等运算。而且还是能透过括号来修改他们的演算先后顺序。和大家数学运算是一样的,一起来看个示范。

.box { width: ((220px + 720px) – 11 * 20 ) / 12 ; }

编译出来的 CSS:

.box { width: 60px; }

 

scss运算-颜色运算

怀有算数运算都辅助颜色值,并且是分支运算的。相当于说,红、绿和蓝各颜色分段单独开展演算。如:

p { color: #010203 + #040506; }

总结公式为 01 + 04 = 0伍,02 + 05 = 07 和 03 + 06 = 09, 并且被合成为:

这么编译出来的 CSS 为:

p { color: #050709; }

算数运算也能将数字和颜料值 一起运算,同样也是分段运算的。如:

p { color: #010203 * 2; }

总结公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06, 并且被合成为:

p { color: #020406; }

 

scss运算-字符运算

在 Sass 中能够透过加法符号“+”来对字符串举行两次三番。例如:

$content: “Hello” + “” + “Sass!”; .box:before { content: ” #{$content}
“; }

编译出来的CSS:

.box:before { content: ” Hello Sass! “; }

除此之外在变量中做字符连接运算之外,还能直接通过 +,把字符连接在一起:

美高梅开户网址 ,div { cursor: e + -resize; }

编译出来的CSS:

div { cursor: e-resize; }

只顾,借使有引号的字符串被添加了3个平素不引号的字符串
(相当于,带引号的字符串在 + 符号右边), 结果会是3个有引号的字符串。
同样的,如果一个不曾引号的字符串被添加了2个有引号的字符串
(没有引号的字符串在 + 符号右侧), 结果将是三个从未有过引号的字符串。

例如:

p:before { content: “Foo ” + Bar; font-family: sans- + “serif”; }

编译出来的 CSS:

p:before { content: “Foo Bar”; font-family: sans-serif; }

 

 

正文摘自慕课网课程

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图