标签：
一. 1. 之前的sass中不需要{}, sass文件后缀名为".sass"
2. 现在的sass中需要{}, sass文件后缀名为".scss"
作用: less与sass的作用都是用于代码简化与重用的作用
3. 创建sass文件的步骤:
- 在websotrm中建立一个File文件, 后缀名为".scss"
- 打开kaola 软件,把整个网页文件拖入kaola中,点击执行
编译,这样在webstorm中就自动生成后缀名为:".scss"
和".css"文件和".css.map"三个文件
- 不用管后缀名为".css.map"文件,我们主要使用到后缀名为
".scss"和".css"文件
编译: sass是从上往下加载的,sass文件在我们的编码过程中的每时每刻都在自动编译,所以
代码写完之后,我们刷新网页就会看到所做的效果;但webstorm
中,因为需要刷新,webstorm中的html或css文件才会变化,
所以在写完sass文件后,需要刷新webstorm,css中才能看到变化;
在html文件中,导入的是css文件,而不是sass文件;
注意: koala不识别中文的路径,所以不要用中文命名文件名称.
若一个网页用sass写了一半后,之后写另一半时,同样的方式,
直接把整个文件路径拖入koala中,然后执行编译,就可以了继续
开工了.
二. 语法
1. 在sass中导入sass文件的方式: @import:"aaa" (可以不需要".scss"后缀名)
2. 在sass中导入css文件的方式: @import: "ccc.css" (必须加上".css"后缀名)
3. 在sass中单行注释: //; 多行注释:/**/
三. 变量
1. 符号为: $
2. 一个变量存一个值: $fontsize: 12px;
3. 一个变量存多个值:
$num: 2;
$num1: 1px 2px 3px 4px; (相当于一个数组有四个值)
$num2: 1px 2px, 3px 4px; (相当于2个数组,每个数组有两个值)
使用: p{padding: $num1} ===> p{padding:1px 2px 3px 4px }
p{margin: nth($num2,1)} ===> p{margin:1px 2px }
nth(变量名,index) 函数,但这里的index是从1开始,1表示第一个数组
(即根据下标值,获取某一个元素(数组)的值,下标值从1开始)
4. 当变量与选择器或者字符串(px)或者属性等不是变量的东西相结合时,需要用
#{}来讲变量括起来,这样才能使变量与其他内容拼接起来.
如: p { width: #{$num}px; } ===> p{ width: 2px }
四. default的使用(less中没有该方法)
作用: 在源码中使用default,是便于别人在引入该源码时方便对这个变量的值进行改动
如源码中使用了如下语句: $color: blue !default; 那么当别人想要更改
$color这个变量的值为 red 时,只需要重新设定$color: red; 这样就覆盖了
$color之前的值. 这两条语句的位置没有限制谁先谁后.
五. 嵌套
1. 元素的嵌套
div{
width:100px;
p{
font-size: 12px;
a{
color: red;
&:hover{
color: blue;
}
}
}
}
说明: 这里在div中嵌套了一个p元素,在p元素中嵌套了一个a元素
嵌套了a元素的hover属性,这里注意: 必须是"&:hover{...}"
这样才能在sass中正确的设置hover属性
2. 属性嵌套
div{
border:{
top: 1px solid red;
bottom: 1px solid yellow;
style: {
top: 1px solid blue;
}
}
}
说明: 在div中设置border属性,border属性中嵌套了border-top属性,
border-bottom属性,嵌套了border-style属性,在border-style属性
中又嵌套了border-style-top属性.
3. 关键字:@at-root 嵌套时,使元素跳出其的根元素
div{
width:100px;
p{
font-size: 12px;
@at-root span{
color: red;
}
}
}
说明: p元素是div的儿子元素,而span元素是跳出div元素的一个独立的元素.
注意: 虽然嵌套有它的作用所在,但我们在编码过程中,应减少这样嵌套的复合元素的
编码.因为浏览器解析css的选择器时,是从右往左解析的,如果嵌套太多,那么性能会
有所降低.
六. 函数(概念---举例)
1. 混合函数(多个参数);
定义的关键字: @mixin; 引用时的关键字: @include
定义语句须放在引用语句的前面
定义: @mixin whb($w,$h,$b){
width:$w;
height:$h;
border:$b
}
引用一: div{
@include whb(10px,20px,1px solid red);
}
引用二: div{
@include whb(auto,20px,1px solid red);
}
注意: 若传入实参时,给div的width传入的参数为"auto",那么div
会填充其父元素的宽度,即100%.
2.混合函数(一个参数)
定义: @mixin radius($r){
border-radius:$r;
}
引用: div{
@include radius(2px);
}
3.混合函数(只有一个参数,给定默认值)
定义: @mixin color($col:red){
color: $col;
}
引用一: p{
@include color(yellow); //css中颜色为yellow
}
引用二: p{
@inclue color(); //css中颜色为red
}
说明: 在定义中,给这个函数的参数给定了一个默认值为"red",
在引用一中传入了参数为"yellow",那么p元素的color为yellow;
而在引用二中没有传入参数,那么p元素的color为函数定义的默认值
,即"red".这就是默认值的引用;
但注意,一般情况下,若函数只有一个参数时,可以给其设定默认值,
若函数有多个参数时就不要设定默认值了,因为这样可能会出错.
七. 继承 引用时的关键字: @extend
举例 .mydiv{
width:100px;
height:100px;
border:1px solid red;
}
.div_1{
@extend mydiv; //这样就继承了mydiv的css样式
color: red; //还可以写自己的样式
}
有时候我们只是需要一个元素来定义样式以供其他元素来使用,这时候我们就需要
把用来定义方式的元素隐藏,关键字为"%",在被隐藏的元素前面加一个"%":
举例: %mydiv{
width:100px;
height:100px;
border:1px solid red;
}
.div_1{
@extend %mydiv; //这样就继承了mydiv的样式,同时也把mydiv隐藏了
}
八. 继承与混合的相同与不同点
相同点: 继承与混合都是用于代码能够被重用的功能
不同点: 若重用时没有参数,则使用继承; 若有参数则使用混合函数
九. 循环的使用
若包含最后一个数据用through;若不包含,则使用to
1. from...through...(包含最后一个数)
p{
for $i from 1 through 5{
h#{$i} {
font-size: #{$i}px;
}
}
}
说明: 在p元素下嵌入了5个元素,并给这五个元素设置了font-size,如下:
h1{font-size: 1px}
h2{font-size:2px}
h3{font-size:3px}
h4{font-size:4px}
h5{font-size:5px}
注意: 在选择器或属性值或属性中嵌入变量时,需写成#{$变量名}这种形式.
2. from...to...(不包含最后一个数)
@for $i from 1 to 5{
.a#{$i} {
font-size: #{$i}px;
}
}
说明: 循环设置了四个元素,并给这四个元素设置了font-size,如下:
.a1{font-size: 1px}
.a2font-size:2px}
.a3{font-size:3px}
.a4{font-size:4px}
十. 键值对(举例说明)
定义一个键值对: $my_map:(a1:1px,a2:2px,a3:3px);
引用: @each $key,$value in $my_map{
.#{$key} {
width: $value;
}
}
这样定义之后,在css中的样式为:
.a1{ width:1px }
.a2{ width:2px }
.a3{ width:3px }
标签：
原文地址：http://www.cnblogs.com/Hrbacity/p/4946081.html
