菜单

Sass用法指南

2019年5月2日 - JavaScript

Sass用法指南

2015/09/06 · CSS ·
Sass

原作出处:
吴广磊的博客   

写在前边的话:趁着CSS文件进一步大,内容越来越复杂,对其展开很好的护卫将变的很狼狈。那时CSS预管理器就可见帮上海大学忙了,它们往往具备变量、嵌套、承继等居多CSS不有所的特点。有多数CSS预管理器,这里总括Sass的使用方法。

======正文起首======

咱俩得以因此一种恍若css的编制程序语言编写代码,保存为.scss后缀名的文件,然后使用Sass进行管理为css文件,而那种.scss文件中能够有变量、嵌套等功能,有个别编程的含意,Sass简介看这里:Sass;同时.scss文件也可以透过Sass管理为减少的、缩进的等不等风格的css代码,方便前期的布署。上边是本人的有的学学总结。

一、情形计划

1.安装rubby:

  Sass是用ruby写的,必要ruby的运营境况,从以下链接下载rubyinstaller进行设置(windows):http://rubyinstaller.org/

2.安装Sass

安装完毕ruby后,接下去安装Sass。由于国内ruby源今后被墙,通过上面格局实行安装SASS,张开cmd命令行。

(一)移除原有的ruby源地址

gem sources –remove https://rubygems.org/

(二)新扩充可用的ruby源地址

gem sources -a https://ruby.taobao.org

(3) 安装Sass

gem install sass

(4)sublime支持scss文件高亮展现

借助package control安装sass插件,之后set syntax为sass即可。

图片 1

(5)制止Sass中文注释乱码

一连写.scss代码进程中中文注释会有乱码的气象,找到engine.rb文件(一般位于Ruby22\lib\ruby\gems\2.2.0\gems\sass-3.4.18\lib\sass目录下边),在具有的require前边新扩充如下代码:

Encoding.default_external = Encoding.find(‘utf-8’)

图片 2

由来,Sass景况安排形成。

二、编译.scss文件为css文件

  小结具体Sass语法格式在此之前,先说一下什么样编写翻译.scss文件为css文件。

壹.切换成.scss文件所在目录

命令行下切换成代码文件夹目录(如Z:\),假使有文件test.scss文件,里面内容如下:(SASS完全援助css语法)

CSS

h1{ font-size:17px; } h2{ font-size:18px; }

1
2
3
4
5
6
h1{
    font-size:17px;    
}
h2{
    font-size:18px;
}

 

2.编译scss文件为css文件

运营命令:sass –style compressed test.scss
test.css,就可以生成压缩版的css文件,并且命名称叫test.css。几点说明:

(一)–style
前面能够有多个参数可选,分别为expanded、nested、compact、compressed,分别选择不相同参数的功力能够和煦尝试体验。

(二)test.scss和test.css文件目录能够自定义,例如把Z盘sass目录下的test.scss文件编写翻译为压缩版的文书,并放置在Z盘css目录下,那么命令即:sass
–style compressed z:\sass\test.scss z:\css\test.css

(3)开垦进度中,只必要修改scss文件,然后编写翻译;前端页面只须求引用相应的css文件就能够。

三.侦听文件和文件夹

  假若愿意某一个scss文件大概相应的文书夹上面文件修改后,自动举办编写翻译,那么能够利用侦屈从令。

(一)侦听文件:

sass –watch –style compressed test.scss:test.css

当test.scss文件有涂改后,会自行编写翻译为test.css,并且是compressed的。

(二)侦听文件夹:

sass –watch –style compressed sass:css

当sass文件夹下.scss文件有涂改的时候,会自行编写翻译为与sass汉语件同名的css文件。

备注:

(一)注意源文件和目的文件之间是冒号,与编写翻译命令中为空格不一样。

(二)生成的map文件可以寻觅source map文件的机能。

3、Sass基本用法

上面对Sass基本的用法进行总计,SASS语法与CSS具有极高的相似度。

以下演示源代码放在test.scss文件中,编写翻译后生成的css文件放在test.css文件中,侦服从令为:

sass –watch –style expanded sass/test.scss:css/test.css

1.变量:以$开头。

源代码:

Sass

$color1:#aeaeae; .div1{ background-color:$color1; }

1
2
3
4
$color1:#aeaeae;
.div1{
    background-color:$color1;
}

编译后:

CSS

.div1 { background-color: #aeaeae; } /*#
sourceMappingURL=test.css.map */

1
2
3
4
5
.div1 {
  background-color: #aeaeae;
}
 
/*# sourceMappingURL=test.css.map */

二.变量嵌套在字符串之中:应该以#{}包裹。

源代码:

Sass

$left:left; .div1{ border-#{$left}-width:5px; }

1
2
3
4
$left:left;
.div1{
    border-#{$left}-width:5px;
}

编译后:

CSS

.div1 { border-left-width: 5px; } /*# sourceMappingURL=test.css.map
*/

1
2
3
4
5
.div1 {
  border-left-width: 5px;
}
 
/*# sourceMappingURL=test.css.map */

3.同意开始展览测算:

源代码:

Sass

$left:20px; .div1{ margin-left:$left+12px; }

1
2
3
4
$left:20px;
.div1{
    margin-left:$left+12px;
}

编译后:

CSS

.div1 { margin-left: 32px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1 {
  margin-left: 32px;
}
 
/*# sourceMappingURL=test.css.map */

肆.同意选用器嵌套:

源代码:

Sass

.div1{ .span1{ height: 12px; } .div2{ width: 16px; } }

1
2
3
4
5
6
7
8
.div1{
    .span1{
        height: 12px;
    }
    .div2{
        width: 16px;
    }
}

编译后:

Sass

.div1 .span1 { height: 12px; } .div1 .div2 { width: 16px; } /*#
sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
.div1 .span1 {
  height: 12px;
}
.div1 .div2 {
  width: 16px;
}
 
/*# sourceMappingURL=test.css.map */

五.应用&引用父成分

源代码:

Sass

.div1{ &:hover{ cursor: hand; } }

1
2
3
4
5
.div1{
    &:hover{
        cursor: hand;
    }
}

编译后:

CSS

.div1:hover { cursor: hand; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1:hover {
  cursor: hand;
}
 
/*# sourceMappingURL=test.css.map */

6.注释:

有两种样式:

(一)//comment:该注释只是在.scss源文件中有,编写翻译后的css文件中从不。

(2)/*!
*/:主要注释,任何style的css文件中都会有,一般放置css文件版权表明等新闻。

(3)/*
*/:该注释在compressed的style的css中从未,其余style的css文件都会包涵。

备注:日常(壹)(二)使用的多些

柒.允许继续:@extend 类名

源代码:

Sass

.class1{ font-size:19px; } .class2{ @extend .class1; color:black; }

1
2
3
4
5
6
7
.class1{
    font-size:19px;
}
.class2{
    @extend .class1;
    color:black;
}

编译后:

CSS

.class1, .class2 { font-size: 19px; } .class2 { color: black; } /*#
sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
.class1, .class2 {
  font-size: 19px;
}
 
.class2 {
  color: black;
}
 
/*# sourceMappingURL=test.css.map */

在意:即使在class2前面有设置了class壹的习性,那么也会潜移默化class贰,如下:

源代码:

CSS

.class1{ font-size:19px; } .class2{ @extend .class1; color:black; }
.class1{ font-weight:bold; }

1
2
3
4
5
6
7
8
9
10
.class1{
    font-size:19px;
}
.class2{
    @extend .class1;
    color:black;
}
.class1{
    font-weight:bold;
}

编译后:

CSS

.class1, .class2 { font-size: 19px; } .class2 { color: black; } .class1,
.class2 { font-weight: bold; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
10
11
12
13
.class1, .class2 {
  font-size: 19px;
}
 
.class2 {
  color: black;
}
 
.class1, .class2 {
  font-weight: bold;
}
 
/*# sourceMappingURL=test.css.map */

可知sass不是单遍编译。

8.引用外部css文件(Partials)

偶尔网页的例外部分会分成多少个文本来写样式,恐怕引用通用的片段体制,那么能够行使@import。

源代码:

Sass

@import “_test1.scss”; @import “_test2.scss”; @import “_test3.scss”;

1
2
3
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";

编译后:

CSS

h1 { font-size: 17px; } h2 { font-size: 17px; } h3 { font-size: 17px; }
/*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
10
11
12
13
h1 {
  font-size: 17px;
}
 
h2 {
  font-size: 17px;
}
 
h3 {
  font-size: 17px;
}
 
/*# sourceMappingURL=test.css.map */

其中_test1.scss、_test2.scss、_test3.scss文件分别安装的h1 h二h3。一般景况下,复用的文书名倘诺以下划线_始发的话,Sass会认为该公文是贰个partial
file,不会将其编写翻译为css文件,主要功用是要透过import引用。

9.mixin和include:

mixin类似于C语音的宏,存款和储蓄通用模块,通过@include引用。

源代码:

Sass

@mixin common{ display:block; margin:0 auto; } .class1{ font-size:16px;
@include common; }

1
2
3
4
5
6
7
8
@mixin common{
    display:block;
    margin:0 auto;
}
.class1{
    font-size:16px;
    @include common;
}

编译后:

CSS

.class1 { font-size: 16px; display: block; margin: 0 auto; } /*#
sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
.class1 {
  font-size: 16px;
  display: block;
  margin: 0 auto;
}
 
/*# sourceMappingURL=test.css.map */

还是可以够更加灵活,像函数同样,如下:

源代码:

Sass

@mixin common($value1,$value2,$defaultValue:12px){ display:block;
margin-left:$value1; margin-right:$value2; padding:$defaultValue; }
.class1{ font-size:16px; @include common(12px,13px,15px); } .class2{
font-size:16px; @include common(12px,13px); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@mixin common($value1,$value2,$defaultValue:12px){
    display:block;
    margin-left:$value1;
    margin-right:$value2;
    padding:$defaultValue;
}
.class1{
    font-size:16px;
    @include common(12px,13px,15px);
}
.class2{
    font-size:16px;
    @include common(12px,13px);
}

编译后:

CSS

.class1 { font-size: 16px; display: block; margin-left: 12px;
margin-right: 13px; padding: 15px; } .class2 { font-size: 16px; display:
block; margin-left: 12px; margin-right: 13px; padding: 12px; } /*#
sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.class1 {
  font-size: 16px;
  display: block;
  margin-left: 12px;
  margin-right: 13px;
  padding: 15px;
}
 
.class2 {
  font-size: 16px;
  display: block;
  margin-left: 12px;
  margin-right: 13px;
  padding: 12px;
}
 
/*# sourceMappingURL=test.css.map */

终极,bootstrap第四版发布了下载,并且从less转移到了sass,能够下载里面看看它里面包车型大巴scss代码,体会一下,或者你会意识越来越多有趣的用法。

(完)

 

1 赞 2 收藏
评论

图片 3

对此一个从后台转到前端的web开辟者来讲,最大的分神正是写CSS,精通CSS的人都知道,它能够支付网页样式,可是无法用它编制程序,认为耦合性格外的高,如若想要方便现在维护,只好逐句修改以至重写一定一些的CSS。随着后台职员大批量的涌入前端这些行当,CSS又焕发了新的春日,人们发轫为CSS加入编程成分,也正是“CSS预管理器”。它的中央思维正是用1门专门的编制程序语言,举行网页样式设计,然后再编写翻译成平常的CSS文件。上面大家构成合法文书档案阮1峰先生的用法指南,再度系统的总括一下Sass的最主要用法。

1.Sass的安装

Sass是Ruby语言写的,大家在安装Sass以前务必先安装Ruby,安装Ruby的进程就不再赘言,安装好Ruby后得以直接在命令行(windows在cmd中)输入下边的下令

gem install sass

2.Sass的使用

Sass文件便是常见的文本文件,后缀名有.sass和.scss三种。
后缀名称叫.sass的公文编码风格不必要加多大括号,但需求管理缩进等操作,如下

*
    margin:0;
    padding:0;

后缀名称为.scss的公文编码风格偏向于健康的CSS风格如下:

*{
    margin:0;
    padding:0;
}

Sass官方都会对双边风格平行更新,所以喜欢哪类风格或许看个人的喜好,由于自家偏向于.scss文件后缀,所以下边包车型大巴例子都会基于.scss文件风格。

下边包车型地铁下令,能够在显示屏上显示.scss文件转载的css(假使文件名称为test)

sass test.scss

借使要把.scss文件直接转接为css文件,前边须要再跟.css的公文名

sass test.scss test.css

Sass提供了两种编写翻译风格的挑选

* nested: 嵌套缩进的css的代码,默认
* expanded:没有缩进、扩展的css代码
* compact:简介格式的css代码
* compressed:压缩后的css代码

咱俩得以用如下命令切换编写翻译风格

sass --style compressed test.scss test.css

我们也足以让Sass监听某些文件或目录,一旦源文件发出转移,就自动生成编写翻译后的版本

//  watch a file

sass --watch test.scss:test.css

//  watch a direcoty

sass --watch app/sass:public/stylesheets

假定有使用webStrom开辟的同校能够加多File
沃特chers,可是自身倍感比不上张开全部目录监听的好,有某个亟待专注的就是例外的批管理对应差别的的后缀名文件即sass.bat对应.sass文件、scss.bat对应.scss文件

三.Sass的中央用法

3.1 导入

Sass的导入(@import)规则和CSS的悬殊,让大家回看一下CSS@import导入的通病:CSS在@import三个文件的时候,它不会立刻导入,唯有在引用它的丰富css文件被下载、解析之后,浏览器才会了解还有其余1个css供给下载,那时才去下载,然后下载后早先解析、营造render
tree等一多级操作,从而形成css不可能并行下载
。不过Sass的导入(@import),编写翻译时会将@import的scss文件合并进来只生成三个CSS文件。不过只要你在sass文件中程导弹入css文件如@import
‘reset.css’,这效果跟一般CSS导入样式文件壹律,导入的css文件不汇合并到编写翻译后的公文中,而是以@import情势存在。

富有的sass导入文本都足以忽略后缀名.scss。一般的话基础的文书命名格局以开头,如mixin.scss。那种文件在导入的时候能够不写下划线,可写成@import
“mixin”。

被导入sass文件a.scss:

//a.scss
//-------------------------------
body {
  background: #eee;
}

供给导入样式的sass文件b.scss:

@import "reset.css";
@import "a";
p{
  background: #0982c1;
} 

转译出来的b.css样式:

@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

依靠地方的代码能够看来,b.scss编写翻译后,reset.css继续维持import的法子,而a.scss则被重组进来了。

3.2 注释

sass有二种注释方式,壹种是正经的css注释方式/*
*/,另1种则是//双斜杆形式的单行注释,可是那种单行注释不会被转译出来。
规范的css注释

/*
 *我是css的标准注释
 *设置body内距
 */
body{
  padding:5px;
} 

双斜杆单行注释
单行注释跟JavaScript语言中的注释同样,使用又斜杠(//),但单行注释不会输入到CSS中。

//我是双斜杠表示的单行注释
//设置body内距
body{
     padding:5px; //5px
} 

3.3 变量

sass的变量必须是$开头,前边紧跟变量名,而变量值和变量名之间就须要选用冒号(:)分隔绝(就如CSS属性设置同样),即使值前面加上!default则意味着暗许值。

3.3.一 普通变量

概念之后可以在大局范围Nelly用。

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

//css style
//-------------------------------
body{
    font-size:12px;
}
3.三.二 暗许变量

sass的暗中同意变量仅必要在值前面加上!default即可。

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

//css style
//-------------------------------
body{
    line-height:1.5;
}

sass的暗许变量一般是用来设置暗中认可值,然后根据需求来覆盖的,覆盖的主意也很简短,只要求在私下认可变量以前再一次申明下变量就能够

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

//css style
//-------------------------------
body{
    line-height:2;
}

能够看来以往编写翻译后的line-height为二,而不是我们私下认可的一.伍。默许变量的价值在张开组件化开荒的时候会格外实用。

3.三.三 特殊变量

一般大家定义的变量都为属性值,可一贯动用,不过假诺变量作为质量或在少数特殊意况下等则必供给以#{$variables}方式利用。

//sass style
//-------------------------------
$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}
三.三.四 多值变量

多值变量分为list类型和map类型,轻巧的话list类型有点像js中的数组,而map类型有点像js中的对象。

3.3.4.1 list

list数据可经过空格,逗号或小括号分隔多个值,可用nth($var,$index)取值。关于list数据操作还有诸多任何函数如length($list),join($list1,$list二,[$separator]),append($list,$value,[$separator])等,具体可参照sass
Functions(寻找List Functions就能够) 定义

//一维数据
$px: 5px 10px 20px 30px;

//二维数据,相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

使用

//sass style
//-------------------------------
$linkColor:         #08c #333 !default;//第一个值为默认值,第二个鼠标滑过值
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}
3.3.4.2 map

map数据以key和value成对出现,当中value又足以是list。格式为:$map: (key一:
value壹, key二: value二, key叁:
value三);。可因此map-get($map,$key)取值。关于map数据还有为数不少其余函数如map-merge($map一,$map二),map-keys($map),map-values($map)等,具体可参看sass
Functions(搜索Map Functions就能够) 定义

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

使用

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

3.4 嵌套(Nesting)

sass的嵌套包罗两种:壹种是选取器的嵌套;另1种是性质的嵌套。我们一般谈起或用到的都以选取器的嵌套。

三.四.一 选拔器嵌套

所谓采用器嵌套指的是在一个选取器中嵌套另一个摘取器来实现一而再,从而进步了sass文件的结构性和可读性。
在选取器嵌套中,能够动用&表示父元素选拔器

//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}  
#top_nav li{
  float:left;
}
#top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}

三.4.贰 属性嵌套

所谓属性嵌套指的是有个别属性具备同1个起来单词,如border-width,border-color都是以border起始。拿个官方网址的实例看下:

//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

3.5 混合(mixin)

sass中使用@mixin表明混合,能够传递参数,参数名以$符号起首,多个参数以逗号分开,也得以给参数设置暗中同意值。注解的@mixin通过@include来调用。

3.5.1 无参数mixin

//sass style
//-------------------------------
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}

3.5.2 有参数mixin

//sass style
//-------------------------------   
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//css style
//-------------------------------
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}

叁.伍.三 八个参数mixin

调用时可一贯传入值,如@include传入参数的个数小于@mixin定义参数的个数,则依照顺序表示,前边不足的施用暗中同意值,如不足的未有暗许值则报错。除外还足以选拔性的传入参数,使用参数名与值同时传入。

//sass style
//-------------------------------   
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

//css style
//-------------------------------
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

三.五.四 多组值参数mixin

万①四个参数能够有多组值,如box-shadow、transition等,那么参数则必要在变量后加八个点表示,如$variables…。

//sass style
//-------------------------------   
//box-shadow可以有多组值,所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

//css style
//-------------------------------
.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}

3.5.5 @content

@content在sass三.二.0中引进,能够用来解决css三的@media等拉动的标题。它能够使@mixin接受1整块体制,接受的体制从@content初阶。

//sass style
//-------------------------------                     
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css style
//-------------------------------
@media only screen and (max-width: 480px) {
  body { color: red }
}                     

3.6 继承

sass中,选择器承袭能够让选用器承接另三个选拔器的享有样式,并共同表明。使用选拔器的一连,要选用首要词@extend,前面紧跟须要持续的选取器。

叁.陆.一 普通继承

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

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

三.6.二 占位选拔器%

从sass
三.二.0现在就足以定义占位选拔器%。这种选取器的优势在于:假若不调用则不会有其余多余的css文件,防止了原先在一些基础的文本中预约义了广大基础的样式,然后实际应用中不管是或不是使用了@extend去继续相应的体制,都会分析出来有所的体裁。占位采用器以%标记定义,通过@extend调用。

//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

//css style
//-------------------------------
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

如上代码,定义了四个占位采用器%ir和%clearfix,在那之中%clearfix那个从未调用,所以解析出来的css样式也就未有clearfix部分。占位选用器的出现,使css文件进一步简明可控,没有剩余。所以能够用其定义一些基础的体制文件,然后依照供给调用发生相应的css。

ps:在@media中权且无法@extend @media外的代码片段,以往将会得以。

3.7 函数

sass定义了广大函数可供使用,当然你也能够友善定义函数,以@fuction起首。实际项目中大家运用最多的相应是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的率先个参数都是颜色值,第贰个参数都以比例。

//sass style
//-------------------------------                     
$baseFontSize:      10px !default;
$gray:              #ccc !defualt;        

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

//css style
//-------------------------------
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

3.8 运算

sass具备运算的表征,能够对数值型的Value(如:数字、颜色、变量等)举行加减乘除肆则运算。请留意运算符前后请留二个空格,否则会出错。

$baseFontSize:          14px !default;
$baseLineHeight:        1.5 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default;
$halfBaseGap:           $baseGap / 2  !default;
$samllFontSize:         $baseFontSize - 2px  !default;

//grid 
$_columns:                     12 !default;      // Total number of columns
$_column-width:                60px !default;   // Width of a single column
$_gutter:                      20px !default;     // Width of the gutter
$_gridsystem-width:            $_columns * ($_column-width + $_gutter); //grid system width

三.九 条件判定及循环

3.9.1 @if判断

@if可三个标准单独使用,也得以和@else结合多规格使用

//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}

三.9.2 三目判别

语法为:if($condition, $iftrue, $iffalse)
。八个参数分别代表:条件,条件为确实值,条件为假的值。

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

3.9.3for循环

for循环有二种样式,分别为:@for $var from through 和@for $var from to
。$i代表变量,start代表起头值,end表示截止值,那七个的区分是生死攸关字through表示蕴含end这些数,而to则不包罗end那个数。

//sass style
//-------------------------------
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//css style
//-------------------------------
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

3.9.4 @each循环

语法为:@each $var in
。当中$var表示变量,而list和map表示list类型数据和map类型数据。sass
三.三.0新投入了多字段循环和map数据循环。

三.九.四.壹 单个字段list数据循环
//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('#{$animal}.png');
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('puma.png'); 
}
.sea-slug-icon {
  background-image: url('sea-slug.png'); 
}
.egret-icon {
  background-image: url('gret.png'); 
}
.salamander-icon {
  background-image: url('salamander.png'); 
}
3.玖.四.2 四个字段list数据循环
//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url('gret.png');
  border: 2px solid white;
  cursor: move; 
}
叁.九.四.3多少个字段map数据循环
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

(完)

相关文章

发表评论

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

网站地图xml地图