首页 > 网站 > WEB开发 > 正文

sass基本用法

2024-04-27 15:14:00
字体:
来源:转载
供稿:网友

本文都是以.sCSS为准

变量

普通变量

sass的变量必须是以$开头的,后面直接跟变量名

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

如果变量需要默认值,在变量值的后面加上默认值的声明 变量的默认值的声明方式是变量值后加上!default; 如下:

$baseLineHeight: 2;$baseLineHeight: 1.5 !default;

这样编译的结果是2

普通变量的使用:

body{ line-height: $baseLineHeight; }

多值变量 多值变量分为list类型(类似js中的数组)和map类型(类似js中的对象) 2.1 list类型 list类型定义

$px: 5px 10px 20px 30px;

list类型使用

$linkColor: #08c #333 !default;a{ color:nth($linkColor,1); &:hover{ color:nth($linkColor,2); }}

2.2map类型 map数据以key和value成对出现,其中value又可以是list。 map类型定义

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

map类型使用

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings { #{$header} { font-size: $size; }}

3.跳出嵌套

//单个选择器跳出.parent-2 { color:#f00; @at-root .child { width:200px; }}//多个选择器跳出.parent-3 { background:#f00; @at-root { .child1 { width:300px; } .child2 { width:400px; } }}

默认@at-root只会跳出选择器嵌套,而不能跳出@media,如果要跳出这种,则需使用@at-root (without: media)。这个语法的关键词有四个:all(表示所有),rule(表示常规css),media(表示media),我们默认的@at-root其实就是@at-root (without:rule)。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表