开始前先说下 Scss 和 Sass 的区别：Scss 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 Scss 其实是同一种东西，我们平时都称之为 Sass。两者之间不同之处有以下两点：
1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
// SASS 语法用缩进，不带分号
body
font: 100% $font-stack
color: $primary-color
// SCSS 语法用括号和分号
body {
font: 100% $font-stack;
color: $primary-color;
}
1、基本用法
- 标签嵌套和属性嵌套
div {
h1 {
color:red;
}
}
p {
border: { // 属性嵌套时要加 :
color: red;
}
}
- 定义变量
$--blue : #1875e7;
div {
color : $--blue;
}
- 自带计算
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
2、高级用法
- @mixin / @include
1、第一种用法：
@mixin 定义重用代码块，@include 引用该代码块
@mixin left {
float: left;
margin-left: 10px;
}
a{
@include left
}
@mixin 强大之处在于可以定义函数和指定缺省值
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
a{
@include rounded(top, left);
}
注意，mixin 定义的函数传参时，不需要加引号。这点和JS里的函数不一样，如上例不是
@include rounded('top','left') 而是 @include rounded(top, left);
2、第二种用法（结合@content）
@mixin e($name) {
@at-root #{&}__#{$name} {
@content;
}
}
a{
@include e(header) {
color:orange;
}
}
// 等价于：
a{
@at-root #{&}__#{$name} {
color:orange;
}
}
// 编译为：
a__header{
color:orange
}
- @extend
继承样式，也是提升重用代码的一种方式
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
- @function
@function 用于定义函数，使用的时候直接调用
@function double($n) {
@return $n * 2; // 用 @return 返回值
}
#sidebar {
width: double(5px); // 这里参数也是不用加引号
}
- 颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
- 循环
// @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");
}
}
- @at-root 回到根级，不用嵌套
.foo {
@at-root .bar {
color:gray;
}
}
// =>
.bar{
color:gray;
}
@at-root 可配合插值 #{&} 实现 BEM 风格
.speech-bubble {
color: purple;
@at-root #{&}__header {
color: orange;
}
@at-root #{&}__text {
color: black;
@at-root #{&}--link {
color:green;
}
}
}
// 编译为：
.speech-bubble {
color: purple;
}
.speech-bubble__header {
color: orange;
}
.speech-bubble__text {
color: black;
}
.speech-bubble__text--link {
color: green;
}
3、常用 scss 样式
- common.scss
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption, {
padding: 0;
margin: 0;
list-style: none;
font-style: normal;
text-decoration: none;
border: none;
color: #333;
font-weight: normal;
font-family: "Microsoft Yahei";
box-sizing: border-box;
-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing: antialiased;
&:hover{
outline: none;
}
}
input[type="button"], input[type="submit"], input[type="search"], input[type="reset"] {
-webkit-appearance: none;
}
textarea { -webkit-appearance: none;}
html,body{
height: 100%;
width: 100%;
background-color: #fff;
}
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 0px;
height: 0px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
- mixin.scss
$blue: #3190e8;
$bc: #e4e4e4;
$fc:#fff;
// 背景图片地址和大小
@mixin bis($url) {
background-image: url($url);
background-repeat: no-repeat;
background-size: 100% 100%;
}
//定位全屏
@mixin allcover{
position:absolute;
top:0;
right:0;
}
//定位上下左右居中
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//定位上下居中
@mixin ct {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
//定位左右居中
@mixin cl {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
//宽高
@mixin wh($width, $height){
width: $width;
height: $height;
}
//字体大小、行高、字体
@mixin font($size, $line-height, $family: 'Microsoft YaHei') {
font: #{$size}/#{$line-height} $family;
}
//字体大小，颜色
@mixin sc($size, $color){
font-size: $size;
color: $color;
}
网友评论