sass入门学习篇(二)

时间:2023-01-19 17:03:06

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

一,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;
}
}