sass-基础-白红宇

sass-基础

阅读量：7131 次

发布时间：2019-06-28

本文共 11421 字，大约阅读时间需要 38 分钟。

导入：

sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。

但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

例子：

a.scss：

body { background: #eee; }

b.scss：

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

转译出来的b.css样式：

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

注释

标准的css注释

/*
*我是css的标准注释
*设置body内距
*/
body{

　　padding:5px;
}

双斜杆单行注释

单行注释跟JavaScript语言中的注释一样，使用又斜杠（//），但单行注释不会输入到CSS中。

3：变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

3.1普通变量

定义之后可以在全局范围内使用。

$fontSize: 12px;

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

3.2默认变量

sass的默认变量仅需要在值后面加上!default即可。

$baseLineHeight: 1.5 !default;

body{ line-height: $baseLineHeight; } ==》 body{ line-height:1.5; }

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可

$baseLineHeight: 2;

$baseLineHeight: 1.5 !default;

body{ line-height: $baseLineHeight; } ==》 body{ line-height:2; }

3.3特殊变量

一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

$borderDirection: top !default;

$baseFontSize: 12px !default;

$baseLineHeight: 1.5 !default;

//应用于class和属性

.border-#{$borderDirection}{

　　border-#{$borderDirection}:1px solid #ccc;

} 　　==》 .border-top{ border-top:1px solid #ccc; }

//应用于复杂的属性值

body{

　　font:#{$baseFontSize}/#{$baseLineHeight};

} ==》 body { font: 12px/1.5; }

3.4多值变量

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

list

list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具体可参考（搜索List Functions即可）

定义
//一维数据$px: 5px 10px 20px 30px; //二维数据，相当于js中的二维数组 $px: 5px 10px, 20px 30px; $px: (5px 10px) (20px 30px);
使用 $linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值 a{ 　　color:nth($linkColor,1); 　　&:hover{ 　　　　color:nth($linkColor,2); 　　} } ==》 　　a{ color:#08c; } 　　a:hover{ color:#333; }
map

map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具体可参考（搜索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; } } ==》 h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }
3.5全局变量
在变量值后面加上!global即为全局变量。这个目前还用不上，不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病，所以才有了这个全局变量。

嵌套(Nesting)

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
4.1选择器嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用&表示父元素选择器

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

==》
#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.2属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下：
.fakeshadow {

　　border: {

　　　　style: solid;
　　　　left: {

　　　　　　width: 4px;
　　　　　　color: #888;
　　　　}
　　　　right: {

　　　　　　width: 2px;
　　　　　　color: #ccc;
　　　　}
　　}
}

==》

.fakeshadow {

　　border-style: solid;
　　border-left-width: 4px;
　　border-left-color: #888;
　　border-right-width: 2px;
　　border-right-color: #ccc;
}

5：@at-root

sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

普通跳出嵌套

//没有跳出

.parent-1 {

　　color:#f00;

　　.child {

　　　　width:100px;

　　}

==》

.parent-1 {color: #f00; }

.parent-1 .child {width: 100px; }

//单个选择器跳出

.parent-2 {

　　color:#f00;

　　@at-root .child {

　　　　width:200px;

　　}

==》

.parent-2 {color: #f00; }

.child {width: 200px; }

//多个选择器跳出

.parent-3 {

　　background:#f00;

　　@at-root {

　　　　.child1 {

　　　　　　width:300px;

　　　　}

　　　　.child2 {

　　　　　　width:400px;

　　　　}

==》

.parent-3 {background: #f00; }

.child1 {width: 300px; }

.child2 {width: 400px; }

@at-root (without: ...)和@at-root (with: ...) 默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。 这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。 我们默认的@at-root其实就是@at-root (without:rule)。

//跳出父级元素嵌套

@media print {

　　.parent1{

　　　　color:#f00;

　　　　@at-root .child1 {width:200px; }

　　}

==>

@media print {

.parent1 {color: #f00; }

.child1 {width: 200px; }

}

//跳出media嵌套，父级有效

@media print {

　　.parent2{

　　　　color:#f00;

　　　　@at-root (without: media) {.child2 {width:200px; } }

　　}

==>

@media print { .parent2 {color: #f00; } }

.parent2 .child2 {width: 200px; }

//跳出media和父级

@media print {

　　.parent3{

　　　　color:#f00;

　　　　@at-root (without: all) {.child3 {width:200px;} }

　　}

==>

@media print {.parent3 {color: #f00; } }

.child3 {width: 200px; }

@at-root与&配合使用

.child{

　　@at-root .parent &{ color:#f00; }

}

==》

.parent .child {color: #f00; }

6：混合(mixin)

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。 6.1无参数mixin 定义： 　　@mixin center-block { margin-left:auto; margin-right:auto; } 使用： 　　.demo{ 　　　　@include center-block; 　　} 结果： 　　.demo{ margin-left:auto; margin-right:auto; } 6.2有参数mixin

　　定义：

　　@mixin opacity($opacity:50) {

　　　　opacity: $opacity / 100;

　　　　filter: alpha(opacity=$opacity);

　　}

　　使用：

　　.opacity{

　　　　@include opacity; //参数使用默认值

　　}

　　.opacity-80{

　　　　@include opacity(80); //传递参数

　　}

6.3多个参数mixin

调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

定义：

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

}

编译后：

.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...。

//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));

}

编译后：

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

}

@content

@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

@mixin max-screen($res){

　　@media only screen and ( max-width: $res ) {

　　　　@content;

　　}

@include max-screen(480px) {

　　body { color: red }

}

编译后：

@media only screen and (max-width: 480px) {

　　body { color: red }

}

PS：@mixin通过@include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用下面的继承%。

7：继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

h1{

　　border: 4px solid #ff9aa9;

}

.speaker{

　　@extend h1;

　　border-width: 2px;

}

==》

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

.speaker{border-width: 2px; }

占位选择器`%`

从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

%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;

}

==》

#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外的代码片段，以后将会可以。

8：函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为：，

实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，

其调用方法为lighten($color,$amount)和darken($color,$amount)，

它们的第一个参数都是颜色值，第二个参数都是百分比。

定义变量：

$baseFontSize: 10px !default;

$gray: #ccc !defualt;

定义函数：

@function pxToRem($px) {

　　@return $px / $baseFontSize * 1rem;

}

使用：

body{

　　font-size:$baseFontSize;

　　color:lighten($gray,10%);

}

.test{

　　font-size:pxToRem(16px);

　　color:darken($gray,10%);

}

结果：

body{ font-size:10px; color:#E6E6E6; }

.test{ font-size:1.6rem; color:#B3B3B3; }

关于@mixin，%，@function更多说明可参阅：

9：运算

运算

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

10：条件判断及循环

@if可一个条件单独使用，也可以和@else结合多条件使用

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

}

编译后：

.ib{

　　display:inline-block;

　　*display:inline;

　　*zoom:1;

}

p {color: green; }

三目判断

语法为：if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。

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

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

for循环

for循环有两种形式，分别为：@for $var from <start> through <end>和@for $var from <start> to <end>。

$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括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 or map>。其中$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

单个字段list数据循环

$animal-list: puma, sea-slug, egret, salamander;

@each $animal in $animal-list {

　　.#{$animal}-icon {

　　}

==》

.puma-icon {background-image: url('/images/puma.png'); }

.sea-slug-icon {background-image: url('/images/sea-slug.png'); }

.egret-icon {background-image: url('/images/egret.png'); }

.salamander-icon {background-image: url('/images/salamander.png'); }

多个字段list数据循环

$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);

@each $animal, $color, $cursor in $animal-data {

　　.#{$animal}-icon {

　　　　border: 2px solid $color;

　　　　cursor: $cursor;

　　}

==》

.puma-icon {

　　border: 2px solid black;

　　cursor: default;

}

.sea-slug-icon {

　　border: 2px solid blue;

　　cursor: pointer;

}

.egret-icon {

　　border: 2px solid white;

　　cursor: move;

}

多个字段map数据循环

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

@each $header, $size in $headings {

　　#{$header} {

　　　　font-size: $size;

　　}

==》

h1 {font-size: 2em; }

h2 {font-size: 1.5em; }

h3 {font-size: 1.2em; }

转载于:https://www.cnblogs.com/vs1435/p/6599074.html

你可能感兴趣的文章

C# DataTable 通过Linq分组

查看>>

bzoj 4484 [Jsoi2015]最小表示——bitset

查看>>

问题 C: A+B Problem II

查看>>

react踩坑 - 1, componentDidMount使用

理解和运用javascript中的call及apply

微软商业服务器部署系列3-windows serevr 2008介绍

查看>>

UVA 10564 Paths through the Hourglass（背包）

查看>>

[hdu6437]Problem L. Videos

查看>>

python 数据加密以及生成token和token验证

查看>>

优达学城数据分析师纳米学位——P4项目知识点整理及代码分析

查看>>

压缩 KVM 的 qcow2 镜像文件

查看>>

导入：

注释

标准的css注释

双斜杆单行注释

3：变量

3.1普通变量

3.2默认变量

3.3特殊变量

3.4多值变量

list

map

3.5全局变量

嵌套(Nesting)

4.1选择器嵌套

4.2属性嵌套

5：@at-root

6：混合(mixin)

@content

7：继承

占位选择器%

8：函数

9：运算

运算

10：条件判断及循环

for循环

@each循环

占位选择器`%`