sass 速查手册(part1)

最新推荐文章于 2023-11-02 19:44:22 发布

转载最新推荐文章于 2023-11-02 19:44:22 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/limingziqiang/p/8573523.html

本文详细介绍了Sass的基本语法，包括变量定义与使用、选择器的嵌套规则、混合器的创建与调用等核心概念，并提供了丰富的示例帮助理解。

(1)变量$符号来标识变量

$nav-color:#F90;

nav{

　　$width:100px;

　　width;$width;

　　color:$nav-color;

}

(2)嵌套这里就不阐述了

(3)父选择器的标识符&

article a{

　　color:blue;

　　&:hover{

　　　　color:red;

　　}

编译后：

article a{

　　color:blue;

}

article a:hover{

　　color:red;

}

2-2. 群组选择器的嵌套;

nav, aside {

　　a{ color:blue}

}

编译后

nav a, aside a{

　　color:blue;

}

2-3. 子组合选择器和同层组合选择器：>、+和~;

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 }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

2-4. 嵌套属性;

nav{

　　border:{

　　　　style:solid;

　　　　width:1px;

　　　　color:#ccc;

　　}

nav {

　　border-style:solid;

　　border-width:1px;

　　border-color:#ccc;

}

--------------------------

nav{

　　border:1px solid #ccc {

　　　　left:0px;

　　　　right:0px;

　　}

nav{

　　border:1px solid #ccc;

　　border-left:0px;

　　border-right:0;

}

3-3. 嵌套导入;

//blue-theme.scss

aside {

　　background:blue;

　　color:white;

}

.blue-theme{

　　@import "blue-theme"

}

////--------------

.blue-theme{

　　aside{

　　　　background:blue;

　　　　color:#fff;

　　}

5. 混合器;

@mixin rounded-corners{

　　-moz-border-radius:5px;

　　-webkit-border-radius:5px;

　　border-radius:5px;

}

notice{

　　background-color:green;

　　border:2px solid #00aa00;

　　@include rounded-corners;

}

/////

.notice{

　　background-color:green;

　　border:2px solid #00aa00;

　　-moz-border-radius:5px;

　　-webkit-border-radius:5px;

　　border-radius:5px;

}

5-3. 给混合器传参;

@mixin link-colors($normal, $hover, $visited) {

　　color:$normal;

　　&:hover{ color: $hover; }

　　&:visited{ color:$visited; }

}

　　@include link-colors(blue, red, green);

}

//------

a{ color:blue;}

a:hover{ color:red;}

a:visited{ color:green;}

5-4. 默认参数值;

@mixin link-colors(

　　$normal,

　　$hover:$normal,

　　$visited:$normal

)

{

　　color:$normal;

　　&:hover {color:$hover;}

　　&:visited{ color:$visited;}

}

如果像下边这样调用：@include link-colors(red) $hover和$visited也会被自动赋值为red。

转载于:https://www.cnblogs.com/limingziqiang/p/8573523.html