css预处理器,为css增加一些编程特性,更简洁,更使用,可读性更佳,更利于代码维护。没有浏览器兼容问题。
说明:学习scsss没必要去了解sass,忽略就好了。
SCSS基于Ruby语言开发而成,因此安装SCSS前需要安装Ruby。
特别说明:mac下自带Ruby无需再次安装。
window下首先要从官网下载Ruby,然后进行安装。
特别说明:要选中第二个添加到环境变量复选框。
打开命令cmd命令行窗口:ruby -v查看是否安装成功
npm install sass-loader --save-dev
npm install node-sass --save-dev
{
test:/\.scss$/,
loaders:['style','css','sass']
}
<style lang="scss">
</style>
/* */ 在css中显示;
// 在css中不显示;
/* 重要注释 !*/ 压缩不会被删除;
<style lang="scss">
@import './text.scss';//导入外部文件
</style>
<style lang="scss">
$color:red;//$变量名:变量值;
</style>
<style lang="scss">
$color:red!default;//!default 用来设置默认值
$color:purple; //根据需求覆盖默认变量
.father01 {
color:$color;
}
</style>
全局变量和局部变量:全局变量是元素外声明的变量,局部变量是在元素里声明的变量,重复声明时局部变量会覆盖全局变量的值;
局部变量值后加上 !global 关键词可以使得局部变量变成全局变量;
$height:200px; //全局变量声明不在大花括号内
$bgcolor:blue;
body {
.father01 { //嵌套
width:$width;
height:$height;
$border:1px solid red; //局部变量是声明在元素内的
border: $border;
$color:red!global;//使用!global关键字可以局部变量变成全局变量
$bgcolor:purple; //全局变量和局部变量名一致时,调用局部变量进行覆盖
background-color: $bgcolor;
}
.father02{
corlor:$color;//使用全局变量
}
$left:left;//使用字符串插值之前必须先声明
.father02 {
width: 300px;
height:300px;
border-#{$left}:2px solid purple;
}
nav {//选择器嵌套
ul {
...
}
li { ... }
a {
...
}
}
.demo {/*===== 属性嵌套 =====*/
font: {// 命令空间后带有冒号: 强烈不建议使用!!
family: fantasy;
size: 30em;
weight: bold;
}
}
/*===== 相当于如下CSS =====*/
.demo {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }
.container {
...
}
.myText {
@extend .container; //这里将继承.container类的所有样式
...
}
%m5 {
...
}
.P1 {
@extend %m5;
}
@mixin normalStyle {//使用@mixin命令定义可重复使用的代码块
...
}
.container {
@include normalStyle;//使用@include 命令引用@mixin定义的代码块
}
@mixin normalStyle($width,$height,$defaultValue:orange) {
width:$width;
height:$height;
background-color:$defaultValue;
}
.container {
@include normalStyle(300px,100px,red);
}
.container {
p {
@if 1+1<3 {
...
} @else {
...
}
}
}
//for 循环
@for $i from 1 to 5 {
.item-#{$i} {
border:#{$i}px solid;
}
}
//while 循环
$m:8;
@while $m > 0 {
.items-#{$m} {
width:2em*$m;
}
$m:$m - 2 ;
}
//这里可以对$m进行运算 让它每次都减去2
//each 语法
@each $item in class01,class02 { //$item就是遍历了in关键词后面的类名列
.#{$item} {
background-color:purple;
}
}
//会编译成 .class01 , .class02 {background-color:purple;}
@function double($sn){ //SCSS允许自定义函数
@return $sn*2;
}
.myText {
...
width:double(200px); //使用在SCSS中自定义的函数
}
.myText {
color:black;
&:hover{
//以下的lighten()、darken()等是SCSS内置的颜色函数
color:lighten(#cc3, 10%); // #d6d65c颜色变浅
color:darken(#cc3, 10%); // #a3a329颜色加深
color:grayscale(#cc3); // #d6d65c
color:complement(#cc3); // #a3a329
}
}
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%; //相当于 width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%; //相当于 width: 31.25%;
}
.container {
&>p { //使用&来引用父元素 可以编译成CSS的 .container>p {} 效果
...
}
}
/*===== SCSS =====*/
a {
...
&:hover {
...
}
body.firefox & {
...
}
}
/*===== 以上内容相当于以下CSS内容 =====*/
a {
...
}
a:hover {
...
}
body.firefox a {
...
}
/*======="&"必须出现在复合选择器开头的位置,后面再连接自定义的后缀*/
/*===== SCSS =====*/
#main {
...
&-sidebar {
...
}
}
/*===== 以上内容相当于以下CSS内容 =====*/
#main {
...
}
#main-sidebar {
...
}
!!参考csdn
!!参考简书
蚂蚁部落文档