Scss

Scss

sass安装

• npm install - g sass

• yarn global add sass

• sass --version

开始学习

• 创建目录

• 进入目录打开vscode

  • code .

• 文件名后缀

  • sacc 类似ruby

  • scss 类似css 推荐

• 预编译 监听状态

  • 准备一个scss文件

  • sass --watch input.scss:output.css 单个文件

    • css

    • map 源代码定位

  • sass --watch app/scss:demo/css 目录

• 记录脚本命令

yarn init -y 
生成脚本文件  package.json
​
编辑
{
    "script":{
        "dev":"sass --watch input.scss:output.css"
    }
}
​
​
下次启动
​
yarn dev

变量

$font-stack:Helvetica,sans-serif;//变量
$primary-color:#333;    
body{
    font:100% $font-stack;
    color:$primary-color;
}
​
​
==>
​
body{
    font:100% Helvetica,sans-serif;
    color:#333;
}
​

嵌套

nav{
    ul{
        margin:0;
        padding:0;
        list-style:none;
    }
    
    li{
        display:inline-block;
    }
​
    a{
        display:block;
        padding:6px 12px;
        text-decoration:none;
    }
}
​
​
​
​
​
​
​
==>
​
nav ul{
    margin:0;
    padding:0;
    list-style:none;
}
​
nav li{
    display:inline-block;
}
​
nav a{
    display:block;
    padding:6px 12px;
    text-decoration:none;
}

通用模板

• _partial.scss

$primary_color:red;

• imput.scss

• @import "./partial"; 省略_ 和 .scss

@import "./partial";
​
a{
    display:block;
    padding:6px 12px;
    text-decoration:none;
    color:$primary_color;
}
​
==>
​
a{
    display:block;
    padding:6px 12px;
    text-decoration:none;
    color:red;
}
​

父类标识符&

@import "./partial";
​
a{
    display:block;
    padding:6px 12px;
    text-decoration:none;
    color:$primary_color;
    
    &:hover{
        color:white;
    }
}
​
#content aside {
    color:red;
    body.ie & {
        color:green;
    }
}
​
​
==>
​
a{
    display:block;
    padding:6px 12px;
    text-decoration:none;
    color:red;
}
​
a:hover{
    color:white;
}
​
​
#content aside {
    color:red;
}
body.ie #content aside{
    color:green;
}
​

• @import和 css的不同在于生成网页时先加载完成

@mixin函数

• 函数格式

• @mixin transform($property){}

• @include transform(rotate(30deg))

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
​
.box { 
    @include transform(rotate(30deg));  
}
​
==>
​
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
​
​
​

扩展和继承

• %message-shared

• @extend %message-shared

%message-shared{
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  }
​
%equal-heights{
  display: flex;
  flex-wrap: wrap;
}
​
.message {
  @extend %message-shared;
}
​
.success {
  @extend %message-shared;
  border-color: green;
}
​
.error {
  @extend %message-shared;
  border-color: red;
}
​
.warning {
  @extend %message-shared;
  border-color: yellow;
}
​
​
==>
​
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
​
.success {
  border-color: green;
}
​
.error {
  border-color: red;
}
​
.warning {
  border-color: yellow;
}

操作符

.container {
  width: 100%;
}
article[role="main"] {

float: left;

width: 600px / 960px * 100%;

}
aside[role="complementary"] {

float: right;

width: 300px / 960px * 100%;

}
==>
.container {

width: 100%;

}
article[role="main"] {

float: left;

width: 62.5%;

}
aside[role="complementary"] {

float: right;

width: 31.25%;

}

特色

• 完全兼容 CSS3

• 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能

• 通过函数进行颜色值与属性值的运算

• 提供控制指令 (control directives)等高级功能

• 自定义输出格式

• color函数

• hsl

• rgb

• rgba

• red

• mix

.helloworld{
    color:hsl(120deg,100%,50%)
}
.helloworld2{

color:rgb(255,0,0)

}
.helloworld22{

color:rgba(255,0,0,0)

}
.helloworld3{

color:mix(red,blue);

}
.helloworld4{

border-width:if(true,1px,2px)

}
.helloworld44{

border-width:if(false,1px,2px)

}
==>
.helloworld{

color:lime;

}
.helloworld2{

color:red;

}
.helloworld22{

color:rgba(255,0,0,0)

}
.helloworld3{

color:purple;

}
.helloworld4{

border-width:1px;

}
.helloworld44{

border-width:2px;

}

CSS扩展

• 嵌套选择器

• & 引用父选择器

  • 也可以作为作为头部 只能放在头部 abc-& 及 aaa-&-abc 都会报错

  • #main{
        &-abc{
    }
    
    }
    ==>
    main{
    }
    main-abc{
    }

• 嵌套属性

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
==>
.funky {

font-family: fantasy;

font-size: 30em;

font-weight: bold;

}
命名空间也可以包含自己的属性值
.funky {

font: 20px/24px {

family: fantasy;

weight: bold;

}

}
==>
.funky {

font: 20px/24px;

font-family: fantasy;

font-weight: bold;

}

占位符选择器 %

%hello{
    color:red;
    font-size:2em;
}
main{
@extend %hello;

}
==>
main{
color:red;
font-size:2em;

}

注释

• /* 这是一行注释*/

• //这是单行注释

• // 编译时会被删除

• 注释中使用变量

$version:"1.2.3";
/This Css ... version #{$version}./
==>
/This Css ... version 1.2.3./

交互环境

• sass -i 进入交互环境

  • 可以进行一些计算

• 变量提升

$width:5em !global;  //提升为全局变量

数据类型

• 数字: 1.2,13,10px

• 文本字符串 "foo","bar",baz

• 颜色: blue,#322121,rgba(255,0,0,0.5)

• 布尔值: true,false

• 空值: null

• 值列表: 1px,2px,3px,4px;

• maps key1:value1,key2:value2

字符串

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");
==>
body.firefox .header:before {

content: "Hi, Firefox users!";

}

列表

• append

• join

颜色

运算