zoukankan      html  css  js  c++  java

  • 09-移动端开发教程-Sass入门

    1. 引言

    CSS3之前的CSS都大都是枚举属性样式，而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用，让CSS的编程黯淡无光，Sass就是一种增强CSS编程的扩展语言（CSS4也可以期待），有了像Sass这种预处理语言后，CSS的编程不再局限在枚举属性了，可以有更广阔的舞台。

    2. Sass的原理

    Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能，让CSS编程变得异常强大。

    当然浏览器是不认识Sass语法。开发人员写完了Sass的语法文件后需要通过工具转成原始的CSS代码。

    //sass 代码
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

// 通过工具将上面的sass代码可以转成下面的CSS代码↓↓↓

//css 代码
//-------------------------------
body{
    font-size:12px;
}

    3. Sass的编译环境

    Sass代码的编译转换工具可以用sass命令行工具、gulp、开发工具插件、webpack等。

    我推荐大家学习阶段直接用开发工具的插件自动生成即可。如果你是在项目阶段使用，那肯定有自动化的流程构建工具比如：gulp、webpack都有对应的插件或者loader，直接对应配置即可。

    老马推荐vscode的自动编译Sass文件的插件：Live Sass Compiler

     

    使用方法：
    第一步： 用vscode打开scss文件。
    第二步：ctrl+shift+p(mac ctrl→command）输入sass选择入下图选项

     

    4. Sass的两种文件后缀

    sass有两种后缀名文件：一种后缀名为sass，语法要求不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的CSS文件格式差不多，使用大括号和分号。

    //文件后缀名为sass的语法
body
  background: #eee
  font-size:12px
p
  background: #0982c1

//文件后缀名为scss的语法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
}

    老马推荐使用scss文件后缀及使用括号和分号的编写方式。

    5. Sass中的变量和注释

    5.1 定义变量及使用

    Sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样）。

    $a-color: blue; // 定义变量。
.box {
  color: $a-color; // => blue  使用变量
}

    用vscode插件转换一下试试？

    5.2 局部变量和全局变量。

    变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。

    //sass style
//-------------------------------
$a-color: blue;  // 全局变量

.box {
  $a-color: red; // 局部变量，box内部不使用。
  color: $a-color; // => red  局部变量
}

.child {
  color: $a-color; // => blue  全局变量
  $main- 16em !global; // 在局部定义全局的变量。
}

.main {
   $main-width;  // 使用在内部定义的全局变量。
}

/*===============生成的CSS代码===================*/
.box {
  color: red;
}

.child {
  color: blue;
}

.main {
   16em;
}

    从以上代码中也可以看到Sass支持CSS的注释/**/之外还支持双斜线的注释: //

    5.3 特殊变量

    如果变量作为CSS属性或在某些特殊情况下等则必须要以 #{$variables}形式使用。

    //sass style
//-------------------------------
$side: top;
.box {
  border-#{$side}: 1px solid #09c;
}

//css style
//-------------------------------
.box {
  border-top: 1px solid #0098cc;
}

    6. 嵌套(Nesting)

    6.1 嵌套规则 (Nested Rules)

    Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。

    //sass style
//-------------------------------
#main p {
  color: #00ff00;
   97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

//css style
//-------------------------------
#main p {
  color: #00ff00;
   97%;
}

#main p .redbox {
  background-color: #ff0000;
  color: #000000;
}

    6.2 父选择器 & (Referencing Parent Selectors: &)

    在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，可以用 & 代表嵌套规则外层的父选择器。

    //sass style
//-------------------------------
.box {
  border-#{$side}: 1px solid #09c;
  &::before {
    content: '';
    display: block;
    position: absolute;
    left: 100px;
    top: 5px;
  }
}
//css style
//-------------------------------
.box {
  border-top: 1px solid #09c;
}
.box::before {
  content: '';
  display: block;
  position: absolute;
  left: 100px;
  top: 5px;
}

    & 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器。

    //sass style
//-------------------------------
#main {
  color: black;
  &-sidebar { border: 1px solid; }
}
//css style
//-------------------------------
#main {
  color: black;
}
#main-sidebar {
  border: 1px solid;
}

    6.3 @at-root

    @at-root用来跳出当前选择器嵌套。

    //sass style
//-------------------------------
.demo {
    ...
    animation: motion 3s infinite;
    @at-root {
        @keyframes motion {
          ...
        }
    }
}

//css style
//-------------------------------   
.demo {
    ...   
    animation: motion 3s infinite;
}
@keyframes motion {
    ...
}

    7. 运算

    Sass支持多种数据类型的变量，比如：

    • 数字，1, 2, 13, 10px
    • 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
    • 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
    • 布尔型，true, false
    • 空值，null

    所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

    7.1 数值运算

    Sass支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

    //sass style
//-------------------------------
.box {
  height: 17px + 20px; // => 37px         数字加法运算
   (75rem/16);   // => 4.6875rem    除法运算
  color: #303030*2;  // => #606060;     乘法运算（颜色运算）
  padding: 20px - 3;   // => 17pex        数字减法
  font-family: sans- + "serif"; // => sans-serif 字符串加法
   1em + (2em * 3); // 带括号的运算
}
//css style
//-------------------------------   
.box {
  height: 37px;
   4.6875rem;
  color: #606060;
  padding: 17px;
  font-family: sans-serif;
   7em;
}

    8. Sass语句

    Sass提供了常用的循环、判断分支语句的相关指令，可以让我们按照编程语言一样编写Sass代码。

    8.1 if语句

    当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码。

    //sass style
//------------------------------- 
$w: 960px;
$type: monster;
.box {
  @if 2*3 > 5 {  // 简单if判断语句
    color: red;
  }
  @if $w > 900px {
     $w;
  } @else {     // if  else 语句
     900px;
  }

  @if $type == ocean {  // 多个if和else语句
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//css style
//------------------------------- 
.box {
  color: red;
   960px;
  color: green;
}

    @if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。
    如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明

    8.2 for循环语句

    @for 指令可以在限制的范围内重复输出格式。类似for循环。
    两种格式：

    • @for $var from <start> through <end> :条件范围包含 <start> 与 <end> 的值
    • @for $var from <start> to <end>: 围只包含 <start> 的值不包含 <end> 的值
    //scss style
//------------for througth循环------------------- 
@for $i from 1 through 3 {
  .item-#{$i} {  2em * $i; }
}
//css style
//------------------------------- 
.item-1 {   2em; }
.item-2 {   4em; }
.item-3 {   6em; }

    //scss style
//------------for  to 循环------------------- 
@for $i from 1 to 3 {
  .item-#{$i} {  2em * $i; }
}
//css style
//------------------------------- 
.item-1 {   2em; }
.item-2 {   4em; }

    8.3 each循环

    @each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

    //sass style
//------------------------------- 
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//css style
//-------------------------------
.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");
}

    复杂对应each

    //sass style
//------------------------------- 
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}
//css style
//-------------------------------
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

    9. 混合指令 (Mixin Directives)

    9.1 不带参数的简单Mixin

    混合指令（Mixin）用于定义可重复使用的样式，可以直接把一整段Sass代码替换到某个地方去。

    //sass style
//------------------------------- 
// 定义mixin reset, 用@mixin开头，后面跟空格和混合块的名字。然后是语句块
@mixin reset {  
  padding: 0;
  margin: 0;
}
html, body, div , input {
  @include reset(); // 引用 reset 混合块。用@include指令引用混合块。
}
//css style
//-------------------------------
html, body, div, input {
  padding: 0;
  margin: 0;
}

    9.2 带参数的Mixin

    Mixin还可也添加参数，跟函数一样使用。

    //sass style
//------------------------------- 
@mixin sexy-border($color, $width) {
  border: $width solid $color;
}
p { @include sexy-border(blue, 1px); }

//css style
//-------------------------------
p {
  border: 1px solid blue;
}

    10. 函数指令 (Function Directives)

    虽然Mixin功能强大，但是某些场景下还是函数应用更方便，Sass也提供了自定义函数的用法。

    //sass style
//------------------------------- 
$grid- 40px;
$gutter- 10px;

// 定义自定义函数 grid-width
@function grid-width($n) {  // 接受一个参数$n
  @return $n * $grid-width + ($n - 1) * $gutter-width;  // 返回值。
}
#sidebar {  grid-width(5); }   // 在属性中调用函数

//css style
//-------------------------------
#sidebar {
   240px;
}

    11. 继承(扩展)

    11.1 基本继承

    sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend，后面紧跟需要继承的选择器。

    //sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border- 2px;
}

//css style
//-------------------------------
h1, .speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border- 2px;
}

    11.2 占位符%

    可以定义占位选择器 %。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend去继承相应的样式，都会解析出来所有的样式。占位选择器以 %标识定义，通过 @extend调用。

    //sass style
//------------------------------- 
%ir {    // 定义占位符。没有选择器名字的一段代码而已。
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header{
  h1{
    @extend %ir;
    300px;
  }
}
.ir{
  @extend %ir;
}

//css style
//-------------------------------
#header h1, .ir {
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

#header h1 {
   300px;
}

    12. 导入文件

    Sass的导入( @import)Sass文件规则和CSS的有所不同，编译时会将 @import的scss文件合并进来只生成一个CSS文件。
    但是如果你在Sass文件中导入css文件如 @import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以 @import方式存在。

    所有的Sass导入文件都可以忽略后缀名 .scss。一般来说基础的文件命名方法以_开头，如 _mixin.scss。这种文件在导入的时候可以不写下划线，可写成 @import "mixin"。

    例如： a.scss 文件

    //a.scss
//-------------------------------
body {
  background: #eee;
}

    main.scss 主文件。

    //sass style
//------------------------------- 
@import "reset.css";  // 导入css文件，不会进行编译。
@import "a";   // 导入a.scss 文件，后缀省略
p{
  background: #0982c1;
} 

//css style
//-------------------------------
@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

    参考列表：

    1. Sass中文网文档
    2. Sass语法快速入门

    联系老马

    对应视频地址：https://qtxh.ke.qq.com/
    老马qq： 515154084
    老马微信：请扫码

     

    感谢您对老马的支持
  • 相关阅读:
    #include< > 和 #include” ” 的区别
    利用MYSQL的加密解密办法应对三级安全等级保护
    磁盘性能对比测试
    C#解除文件锁定
    PyQt5
    今天需要完成的开发任务
    云平台丢失文件的查找办法
    为电子书包配置透明网关+缓存服务器
    移动支付的实现逻辑
    python强大的数据类型转换
  • 原文地址：https://www.cnblogs.com/fly_dragon/p/8428762.html
Copyright © 2011-2022 走看看