1、sass与scss
sass没有大括号和分号,scss更倾向于css的格式,带有大括号和分号
2、导入
scss文件使用@import导入文件,导入scss文件可以不写后缀,编译后合并为一个文件,导入css文件之后生成的css文件带有@import ‘name.css’
3、注释
//或者是/**/
4、变量
分为普通变量、默认变量(!default)、全局变量(!global)、特殊变量(#{$var})和多值变量(list和map)
局部变量和全局变量的声明和用法类似js
特殊变量:我的理解是js中变量和字符串拼接时会采用引号和‘+’号,这里的特殊变量可以直接放在引号当中不担心不解析,例如
$back:icon;
//sass官方写法
.demo{background:url(img/#{$back}.png);}
//自己试的写法
.demo{background:url(img/'+#{$back}+'.png);}
//编译之后为
.demo{background:url(img/icon.png);}
.demo{background:url(img/icon.png);}
//两种方法都可以,第二种谨慎使用,我并没有看到官网文档中有这种写法
多值变量
list:类似数组
//一维数据
$px: 5px 10px 20px 30px;
//二维数据,相当于js中的二维数组
$px: 5px 10px, 20px 30px;
map:类似对象,含有键值对
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
5、嵌套
选择器嵌套和属性嵌套,前者类似css后代选择器,后者是把带有相同前缀的属性嵌套书写,个人感觉意义不大,还增加了阅读难度
//选择器嵌套(&代表父级容器)
#top_nav{
text-transform: capitalize;
background-color:#333;
li{
float:left;
}
a{
display: block;
padding: 0 10px;
color: #fff;
&:hover{
color:#ddd;
}
}
}
//属性嵌套
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
@at-root 跳出嵌套,个人感觉意义不大,想要跳出不在大括号内写不就可以了
6、@mixin混合
类似函数,用@include调用,自定义参数,可以多个也可以多组
//sass style
@mixin center-block {
margin-left:auto;
margin-right:auto;
}
.demo{
@include center-block;
}
//css style
.demo{
margin-left:auto;
margin-right:auto;
}
7、@content
更加适合用于@media
//@content中存放自定义的样式
@mixin max-screen($res){
@media only screen and ( max-width: $res )
{
@content;
}
}
@include max-screen(480px) {
body { color: red }
}
//css style
@media only screen and (max-width: 480px) {
body { color: red }
}
8、继承
就是直接采用某个已有的样式的全部样式,使用@extend调用,
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
h1,.speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}
9、% 点位选择器
很好理解,在scss文件中先定义一些常用的css类,调用就编译到css文件中,不调用就不编译,降低文件大小
10、函数
可以自定义函数@function,也可以使用scss自带的函数,一般用的最多的是颜色函数,例如lighten(颜色值,百分比)、darken(颜色值,百分比)
$baseFontSize: 10px !default;
$gray: #ccc !defualt;
// pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}
body{
font-size:$baseFontSize;
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(16px);
color:darken($gray,10%);
}
//css style
body{
font-size:10px;
color:#E6E6E6;
}
.test{
font-size:1.6rem;
color:#B3B3B3;
}
11、运算
简单的四则运算
12、条件判断与循环
//sass style
$lte7: true;
$type: monster;
.ib{
display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
//css style
.ib{
display:inline-block;
*display:inline;
*zoom:1;
}
p {
color: green;
}
//三目判断
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
//@for循环
//throgh包含end
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//to不包含end
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//@each循环
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
//@map循环
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}