sass入门学习篇（二）

最新推荐文章于 2020-03-08 21:51:01 发布

dfe3318

最新推荐文章于 2020-03-08 21:51:01 发布

阅读量80

点赞数

原文链接：http://www.cnblogs.com/937522zy/p/5531537.html

版权

从语法开始但是语法也不是一两句的事情，首先看基本的导入，使用

一，sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，建议scss.

二，导入

使用@import导入但是和css导入有点区别。

比如基础的文件命名：_mixin.scss导入的时候可以省略下划线写成：@import "mixin"

三，注释

sass有两种注释方式，一种是标准的css注释方式/* */，

另一种则是//双斜杆形式的单行注释，

注意：不过这种单行注释不会被转译出来。

四，变量，必须是以$开头，！default表示默认值,sass是没有局部变量的

1，普通变量

$f:12px;

body{font-size:$f;}

2,默认变量

$f:12px !default;
body{
  font-size:$f;
}

3,覆盖默认变量

$f:12px !default;
$f:14px;
body{
    font-size:$f;
}

　　结果font-size：14px;

4,特殊变量：两种情况，一是作属性，二是作值。都以#{$name}的形式

作属性：
$direction:top !default;

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

做值：
$f:12px !default;
$s:1.5 !default;
body{
   font:#{$f}/#{$s};        
}

　　作值这里有点不明白，不能直接写成font：$f/$s;这样吗？

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

list：可用nth($var,$index)取值如：length（$f,$s）

　　　　一维：$px:5px 1px 2px 3px;

　　　　二维：$px:(5px 1px),(2px 3px);

eg: 
$linkColor:#222 #333 !default;

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

　　map:map数据以key和value成对出现，其中value又可以是list。

可通过map-get($map,$key)取值

格式：$map:(key1:val1,key2:val2);

　　　map-m($map1,$map2),map-key($map),map-values($map)

eg:

定义：
$heading:(h1:2em,h2:1em,h3:3em);
使用：
@each $header, $size in $headingss{
     #{$header}{
    font-size:$size;     
}
}

转载于:https://www.cnblogs.com/937522zy/p/5531537.html

关注