关于scss的一些总结

开始前先说下 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;
}

一、安装

npm install -g sass

二、用法
1、基本用法
标签嵌套和属性嵌套

　　div {
　　	   font-size:18px;
　　　　h1 {
　　　　　　color:red;
　　　　}
　　}
　　p {
　　　　border: {    // 属性嵌套时要加 :
　　　　　　color: red;
　　　　}
　　}

定义变量
(1)变量使用 $ 符号

　$textcolor : #1875e7;　
　　div {
　　　color : $textcolor;
　　}

(2)Sass 变量的作用域只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 green，p 标签则是为 red。

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}

2、高级用法
（1）@mixin / @include
@mixin 定义重用代码块，@include 引用该代码块

//
 @mixin left {
　　　　   float: left;
　　　　   margin-left: 10px;
　　   }
       a{
          @include left
       }

（2）@extend
继承样式，也是提升重用代码的一种方式

　　.class1 {
　　　　border: 1px solid #ddd;
　　}
　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

（3）@function
@function 用于定义函数，使用的时候直接调用

//
　@function double($n) {
　　　　@return $n * 2;  // 用 @return 返回值
　　}
　　#sidebar {
　　　　width: double(5px);  // 这里参数也是不用加引号
　　}

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;
    }
}

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;
}