sass经验总结

▲sass安装，先安装Ruby，然后再安装SASS。

▲1.SASS允许使用变量，所有变量以$开头。变量是 `sass` 提供的最基本的工具

$bgColor：pink;
header{
    color:$bgColor;
}
footer{
    color:$bgColor;
}

▲ // 变量名用中划线'-'还是下划线'_'分隔,这两种用法相互兼容,用中划线声明的变量可以使用下划线的方式引用，反之亦然
$link-color: blue;
a {
  color: $link_color;
}
//编译后
a {
  color: blue;
}

▲ //!default 含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

//如果没有重新赋值，则使用默认值
$const:'hello' !default
div{
    const:$const;
}
//编译为
div{
    const:'hello';
}

// 如果已经赋值，则不再使用默认值
$const:'hi'
$const:'hello' !default
div{
    const:$const;
}
//编译为
div{
    const:'hi';
}

▲2.嵌套CSS 规则

//在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成
a{
	&：before{
		content:'xx'
	}
}
//嵌套属性:反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的
nav {
  font: {
  	fam: solid;
  	width: 1px;
  	color: #ccc;
  }
}

▲3. 导入SASS文件

//@import规则
@import '@/styles/theme/variables.scss';

▲4. 注释

//1.标准的CSS注释 /* comment */ ，会保留到编译后的文件。
//2.在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

▲5. 混合器@mixin 判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字

// 你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用

// 使用@mixin命令，定义一个代码块
@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
// 使用@include命令，调用这个mixin。
.page-container {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    @include flexCenter;
  }

//mixin的强大之处，在于可以指定参数和缺省值，有默认值。
@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}
//使用的时候，根据需要加入参数：
div {
　　　　@include left(20px);
　　}

// 传参，没有默认值
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}


//:link表示鼠标点击之前，也称为原始状态
//:hover表示鼠标悬停状态
//:active表示鼠标点击状态
//:visited表示鼠标点击之后状态

6.使用选择器继承来精简CSS

//通过选择器继承继承样式 @extend
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

▲ 父选择器的标识符&

a{
	&：before{
		content:'xx'
	}
}

:not()选择器

<div class="sibcont">
    <ul>
        <li>妹子前端</li>
        <li>汉子前端</li>
        <li>mooshine前端</li>
        <li>not()选择器</li>
    </ul>
</div>
//not选择器
.sibcont ul li:not(:first-child){
    color:red;
}
//not与属性选择器
::v-deep .el-pagination button:not([disabled='disabled']):hover {
  background: rgba(68, 81, 159, 0.6);
  color: #fff;
}

子组合选择器和同层组合选择器：>、+和~;

//  > 选择元素的直接子元素
<article>
    <section></section>
    <div>
      <section></section>   //这个就没有描边
    </div>
    <section></section>
 </article>
article section { margin: 5px }
article > section { border: 1px solid #ccc }

//  + 相邻兄弟选择器  
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>  //只有他有作用
<p>This is paragraph.</p>
h1+p {
      margin-top: 150px;
      color: red;
}
                   
// ~ 兄弟选择器   h1~p选择器  h1之后出现的所有p。两种元素必须拥有相同的父元素，但是 p不必直接紧随h1。
<p>1</p>
  <h1>2</h1>
  <div>
     <p>3</p>  //没有作用，相同父元素
  </div>
  <p>4</p>
  <p>5</p>     
h1~p {
      color: red;
    }

sass插值语句，在calc中使用变量

//在vue中，通过sass定义一个变量
$height: 100px;
#div{
 height: calc(100% - $height);
}
//此方法行不通，将变量用#{}包裹起来即可
$height: 100px;
#div{
 height: calc(100% - #{$height});
}

Sass 颜色操作

// lighten(color, amount) 通过改变颜色的亮度值（0% - 100%），让颜色变亮，创建一个新的颜色。
// darken(color, amount) 通过改变颜色的亮度值（0% - 100%），让颜色变暗，创建一个新的颜色。
.box{
    &:active {
		background: lighten(#000, 50%);
	}
}

sass实时编译

// Visual Studio Code插件Live Sass Compiler
// 按F1或ctrl+shift+P键入 Live Sass: Watch Sass 以开始实时编译，或者按键入Live Sass: Stop Watching Sass以停止实时编译。

控制指令 @if 三角形

<div class="demo"></div>

@mixin san($orientation: top, $size: 100px, $color: red) {
  @if ($orientation==top) {
    border-color: transparent transparent $color transparent;
    border-width: 0 $size $size $size;
  } @else if($orientation==right) {
    border-color: transparent transparent transparent $color;
    border-width: $size 0 $size $size;
  } @else if($orientation==bottom) {
    border-color: $color transparent transparent transparent;
    border-width: $size $size 0 $size;
  } @else if($orientation==left) {
    border-color: transparent $color transparent transparent;
    border-width: $size $size $size 0;
  }
  width: 0;
  height: 0;
  border-style: solid;
}

.demo {
  @include san(top, 12px, orange);
}

SaSS Export用法

//将变量名导出，可以以Js的形式使用SCSS变量，通常写在一个variables.scss文件中，在需要的地方引入。

//在variables.scss文件中命名变量，  :export导出
$red:#C03639;
$green: #30B08F;
$yellow:#FEC171;

:export {
  red: $red;
  green: $green;
  yellow: $yellow;
}

//可以再js总导入使用
import { red, green, yellow } from 'variables.scss'
console.log(red, green, yellow)

mix($color1, c o l o r 2 , [ color2, [ color2,[weight])函数

//$weight表示的混合的权重，默认值为50%，指的第一个颜色$color1的比例，取值范围为0~100%，函数最终的返回值是颜色的十六进制表达式。
$color1: orange;
$color2: green;
body {
  background: mix($color1, $color2, 0.6);
}

HSL函数

//hsl($hue, $saturation, $lightness) 根据HSL中的三个值计算出一个颜色；
//hue($color) //获取HSL中的色调值；
//saturation($color) //获取HSL中的饱和度；
//lightness($color) //获取HSL中的亮度值；
//adjust-hue($color, $degree) //改变HSL中的色调值； 
//$degree表示的改变色调度数的值，可以是正数，也可以是负数。如果为正数，在HSL颜色转盘上顺时针旋转相应的$degree，旋转之后的度数就是颜色的色调值；如果是负数，逆时针旋转即可。
body {
  background: adjust-hue(red, 60deg);
}

//lighten($color, $amount) //颜色变浅函数；取值范围是0~100%。
//darken($color, $amount) //颜色变深函数；
$colorMain: #3d48de;
.lighten {
  background-color: lighten($colorMain, 15%);
}
.darken {
  background-color: darken($colorMain, 25%);
}

//saturate($color, $amount) //增加颜色的饱和度；取值范围为0~100%。
//desaturate($color, $amount) //减少颜色的饱和度；
$colorMain: #3d48de;
.saturate {
  background-color: saturate($colorMain, 15%);
}
.desaturate {
  background-color: desaturate($colorMain, 25%);
}

//grayscale($color) //将该颜色转换为相对应的灰度颜色；
$colorMain: #5960c2;
body {
  background-color: grayscale($colorMain);
}

//complement($color) //获取该颜色值旋转180度后相对应的颜色；
//invert($color) //和complement相似，获取该颜色值旋转180度后相对应的颜色，不过不能改变透明度；
$colorMain: #5960c2;
body {
  background-color: complement($colorMain);
}
.div {
  background-color: invert($colorMain);
}

Opacity函数

//alpha/opacity($color)  //获取颜色的透明度；
//rgba($color, $alpha) //改变颜色的透明度；

$colorMain: red;
$colorAlpha1: rgba(red, 0.8);
$colorAlpha2: rgba(red, 0.5);
body {
  background-color: rgba($colorMain, alpha($colorAlpha1));
}
.div {
  background-color: rgba($colorMain, opacity($colorAlpha2));
}

//opacify/fade-in($color, $amount) //让颜色更加不透明；
//transparentize/fade-out($color, $amount) //使颜色更加透明化；

$colorMain: rgba(#3d48de, 0.3);
$funcData: opacify, fade-in, transparentize, fade-out;
@mixin func($funcName) {
  @if $funcName == opacify {
    background-color: opacify($colorMain, 0.5);
  }@else if $funcName == fade-in {
    background-color: fade-in($colorMain, 0.5);
  }@else if $funcName == transparentize {
    background-color: transparentize($colorMain, 0.2);
  }@else if $funcName == fade-out {
    background-color: fade-out($colorMain, 0.2);
  }
}
@each $value in $funcData {
  .div-#{$value} {
    @include func($value);
  }
}

change-color( )直接被替换，adjust-color( )加上原来的，最终获取的颜色

//adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) //调整一个或者多个属性；

//scale-color($color, [$red], [$green], [blue], [$saturation], [$lightness], [$alpha]) //调整一个或者多个属性，获取一个流畅的颜色；

//change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) //调整一个或者多个属性；

//ie-hex-str($color) //将一个颜色转换为ie滤镜使用的颜色；

//在上面的函数中,$color参数是必需的，后面可以跟一个参数，也可以是多个。不过，要注意，不能同时调整RGB值和HSL值。

$colorMain: rgba(#3d48de, 0.3);
.div-01 {
  background-color: change-color($colorMain, $red: 123);
}
.div-02 {
  background-color: adjust-color($colorMain, $red: 123);
}
//编译后
.div-01 {
  background-color: rgba(123, 72, 222, 0.3);
}
.div-02 {
  background-color: rgba(184, 72, 222, 0.3);
}

//观察编译之后的CSS样式，同时给两个函数中的$red赋值为123，发现change-color( )函数的R值被替换为123，而adjust-color( )函数为184。$colorMain变量的R值为61，所以184是123 + 61所得的结果。
//我们可以得出以下结论：change-color( )函数是将原来的函数的RGB值、HSL值、透明度值，直接被替换。 adjust-color( )函数是之后参数的赋值加上原来的函数相对应的值，最终获取的颜色。

$colorMain: rgba(#3d48de, 0.3);
$funcData: change-color, adjust-color, scale-color, ie-hex-str;
@mixin func($funcName) {
  @if $funcName == change-color {
    background-color: change-color($colorMain, $red: 123);
  }@else if $funcName == adjust-color {
    background-color: adjust-color($colorMain, $red: 123);
  }@else if $funcName == scale-color {
    background-color: scale-color($colorMain, $red: 20%);
  }@else if $funcName == ie-hex-str {
    background-color: ie-hex-str($colorMain);
  }
}
@each $value in $funcData {
  .div-#{$value} {
    @include func($value);
  }
}
//编译后
.div-change-color {
  background-color: rgba(123, 72, 222, 0.3);
}
.div-adjust-color {
  background-color: rgba(184, 72, 222, 0.3);
}
.div-scale-color {
  background-color: rgba(100, 72, 222, 0.3);
}
.div-ie-hex-str {
  background-color: #4D3D48DE;
}
//scale-color( )函数最后得的结果是将R值转变为100，在RGB中，R的值为0~255，原来颜色的R值为61，首先获取原颜色的R值和255之间差值，取得差值的20%，然后加上原来颜色的R值61,也就是(255 - 61) * 20% + 61= 100。如果$red为-20%，那将取的是原来颜色的R值与0之间的差值，用原来颜色R值减去差值的20%，也就是61 - (61 - 0) * 20% = 49，最后四舍五入。

hsb色环

//顺时针旋转
0红色  60黄  120绿  180青  240蓝  300洋红  360红色

@each

//@each 指令的格式是 $var in <list>     @each 将变量 $var 作用于值列表中的每一个项目，然后输出结果

<p class="p_pink">This is first paragraph.</p>
<p class="p_violet">This is second paragraph.</p>
<p class="p_yellow">This is third paragraph.</p>
<p class="p_blue">This is fourth paragraph.</p>

@each $color in pink, violet, yellow, blue {
  .p_#{$color} {
    background: #{$color};
  }
}

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//编译为
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

sass经验总结

▲sass安装，先安装Ruby，然后再安装SASS。

▲1.SASS允许使用变量，所有变量以$开头。变量是 `sass` 提供的最基本的工具

▲2.嵌套CSS 规则

▲3. 导入SASS文件

▲4. 注释

▲5. 混合器@mixin 判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字

6.使用选择器继承来精简CSS

▲ 父选择器的标识符&

:not()选择器

子组合选择器和同层组合选择器：>、+和~;

sass插值语句，在calc中使用变量

Sass 颜色操作

sass实时编译

控制指令 @if 三角形

SaSS Export用法

mix($color1, c o l o r 2 , [ color2, [ color2,[weight])函数

HSL函数

Opacity函数

change-color( )直接被替换，adjust-color( )加上原来的，最终获取的颜色

hsb色环

@each

继续阅读

赶工心得（一）

两种清除浮动的方法

没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！

如何成为一名.net 工程师?

[转]如何成长为一名全栈工程师全栈工程师

tabpanel 使用问题

underscore模板功能的使用和学习

CSS之折叠菜单

web开发之前后端渲染

DOM下元素 offset client scroll 相关属性简介

IE8 CSS设置DIV居中，添加“margin:0 auto”

JavaScript的那些坑之事件代理事件代理事件阶段

ACS基本配置-权限等级管理

vue （vue2.0）使用总结(从大体结构总结)

父子组件间传值的实现父子组件间传值的实现

vue搭建过程及出现问题

sass经验总结

▲sass安装， 先安装Ruby，然后再安装SASS。

▲1.SASS允许使用变量，所有变量以$开头。变量是 sass 提供的最基本的工具

▲2.嵌套CSS 规则

▲3. 导入SASS文件

▲4. 注释

▲5. 混合器@mixin 判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字

6.使用选择器继承来精简CSS

▲ 父选择器的标识符&

:not()选择器

子组合选择器和同层组合选择器：>、+和~;

sass插值语句，在calc中使用变量

Sass 颜色操作

sass实时编译

控制指令 @if 三角形

SaSS Export用法

mix($color1, c o l o r 2 , [ color2, [ color2,[weight])函数

HSL函数

Opacity函数

change-color( )直接被替换，adjust-color( )加上原来的，最终获取的颜色

hsb色环

@each

继续阅读

▲sass安装，先安装Ruby，然后再安装SASS。

▲1.SASS允许使用变量，所有变量以$开头。变量是 `sass` 提供的最基本的工具