scss语法
scss常见用法
阮一峰 sass语法
变量 $
定义
1- 变量的定义一般以$开头，某个变量的作用域仅限于他们定义的层级以及子层级。
如果变量是定义在所有嵌套选择器之外的，那么他们可以在各处被调用。
$color1:#aeaeae;
.div1{
background-color:$color1;
}
2- 如果希望某个在子选择器中定义的变量能够成为全局变量，可以使用!global关键字：
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
3- sass的默认变量仅需要在值后面加上 !default即可。
默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明变量
$baseLineHeight: 1.5 !default;
$baseLineHeight: 2;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:2;
}
嵌套引用,特殊变量
嵌套引用在其他编程语言中即是字符串插值，需要用#{}进行包裹：
一般我们定义的变量都为属性值，可直接使用
但是如果变量作为属性或在某些特殊情况下等则必须要以 #{$variables}形式使用。
$left:left;
.div1{
border-#{$left}-width:5px;
}
多值变量 list map
多值变量分为list类型和map类型
简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
list数据可通过空格，逗号或小括号分隔多个值，可用 nth($var,$index)取值。
定义
//一维数据
$px: 5px 10px 20px 30px;
//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
使用
$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
//css style
//-------------------------------
a{
color:#08c;
}
a:hover{
color:#333;
}
map数据以key和value成对出现，其中value又可以是list。
格式为: `$map: (key1: value1, key2: value2, key3: value3);`,通过 `map-get($map,$key)`取值。
关于map数据还有很多其他函数如 `map-merge($map1,$map2)`, `map-keys($map)`,`map-values($map)`等
定义
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
使用
//sass style-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
在 Sass 中 map自身带了七个函数：
map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
map-keys($map)：返回 map 中所有的 key。
map-values($map)：返回 map 中所有的 value。
map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。
变量计算
$left:20px;
.div1{
margin-left:$left+12px;
}
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
font: (italic bold 10px/8px); // In a list, parentheses don't count
}
选择器
嵌套
.div1{
.span1{
height: 12px;
}
.div2{
width: 16px;
}
}
属性也可以嵌套，比如border-color属性，可以写成：
p {
border: { 注意，border后面必须加上冒号。
color: red;
}
}
父元素引用
在嵌套的子层级中，允许使用&引用父元素：
.div1{
&:hover{
cursor: hand;
}
}
代码重用
允许一个选择器，继承另一个选择器
.class1{
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}
如果在class2后面有设置了class1的属性，那么也会影响class2
class1{
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}
.class1{
font-weight:bold;
}
import 引用外部css文件
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
mixin&include 代码块的复用
使用 @mixin 命令，定义一个代码快
@mixin left {
float: left;
margin-left: 10px;
}
使用 @include 命令，调用这个mixin
div {
@include left；
}
1- 参数与缺省值
边距设置
@mixin common($value1,$value2,$defaultValue:12px){
display:block;
margin-left:$value1;
margin-right:$value2;
padding:$defaultValue;
}
.class1{
font-size:16px;
@include common(12px,13px,15px);
}
.class2{
font-size:16px;
@include common(12px,13px);
}
2- 浏览器前缀设置设置
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
编程式方法
流程控制
条件语句
@if
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
@else
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
三目判断
语法为： if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。
循环语句
for
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
函数
sass允许用户编写自己的函数
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
网友评论