0
点赞
收藏
分享

微信扫一扫

sass教程

Mhhao 2022-02-26 阅读 99
sasscss前端

目录

Sass是什么？

为什么使用Sass？

Sass执行的方法

使用node.js编译sass文件

Sass 变量

Sass if语句

Sass for循环

Sass each循环

Sass 混合器

Sass 嵌套/继承

Sass 特殊属性的设定

Sass 结构嵌套

Sass文件的嵌套

Sass是什么？

Sass是世界上最成熟、稳定、强大的专业级CSS扩展语言。Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。

为什么使用Sass？

CSS本身语法不够强大，导致重复编写一些代码，无法实现复用，而且代码也不方便维护。

Sass引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等特性。

Sass执行的方法

浏览器不支持sass文件的执行，浏览器只执行css文件的执行。

sass或者sass格式的文件必须都编译成css文件必须都编译成css文件，浏览器才能正确的执行。

执行的方法：

1、vscode插件，功能比较单一，不能满足实际项目需求。

2、node.js编译，需要下载node.js相关的sass编译 模块化文件。

3、gulp，使用gulp程序打包压缩的同时，编译sass文件。

使用node.js编译sass文件

1、配置下载安装路径

node.js默认是从美国的服务器下载安装第三方依赖包，我们需要修改下载路径是中国的服务器，npm切换淘宝镜像地址 npm config set registry https://registry.npm.taobao.org

2、node.js编译sass文件

使用命令下载安装node.js的sass模块化文件，是第三方模块化文件/第三方依赖包。

npm i -g sass 简写

npm install --global sass 完整代码

命令会自动安装最新版本的sass依赖包，有版本号就是成功。

3、node.js编译sass文件的命令

编译一个文件    sass sass文件名 css文件名

监听一个文件    sass --watch sass文件名:css文件名 ，监听的sass文件内容改变自动执行编译

编译一个文件夹    sass sass文件夹:css文件夹

监听一个文件夹    sass --watch sass文件夹:css文件夹

Sass 变量

使用 $变量名称 : 数据 ; 定义变量，使用 $变量名称 调用执行变量；

sass代码，如下所示

$color:red;
$width:100px;
$height:100px;

div{
    width: $width;
    height: $height;
    background: $color;
}

转化为css代码：

div {
   width: 100px;
   height: 100px;
   background: red;
}

Sass if语句

使用 @if  @else if  @else 关键词，定义if语句。@if等之后没有()，sass中没有 === 只有==是判断相等。

sass代码，如下所示：

$num:10;
div{
   width:100px;
   height: 200px;
   @if $num == 1 {
       color: blue;
   }@else if $num == 2 {
       color: red;
   }@else if $num == 3 {
       color: pink;
   }@else{
       color: yellow;
  }
}

转化为css代码：

div{
   width: 100px;
   height: 200px;
   color: yellow;
}

Sass for循环

@for $变量 from 数值1 to 数值2

从数值1循环至数值2，但是不包括数值2

@for $变量 from 数值1 through 数值2

从数值1 循环至 数值2，并且包括数值2

sass代码：

//1 to 3，实际是 1-2 
@for $i from 1 to 3 {
    div{
        width: $i * 100px;
        height: $i * 100px;
    }
}
//1 through 3,就是1 - 3
@for $i from 1 through 3 {
    p{
        width: $i * 100px;
        height: $i * 100px;
    }
}

转化为css代码：

div{
    width: 100px;
    height: 100px;
}
div{
    width: 200px;
    height: 200px;
}
p {
  width: 100px;
  height: 100px;
}
p {
  width: 200px;
  height: 200px;
}
p {
  width: 300px;
  height: 300px;
}

Sass each循环

each是针对sass数组的循环语句

定义数组

$变量:(索引 数据) , (索引 数据) , (索引 数据) ....;

循环数组

@each $变量1 , $ 变量2 in $数组{}

$变量1 存储数组的索引下标

$变量2 存储数组的数值数据

在()中使用#{}包裹解析变量

sass代码：

//定义数组
$arr:(1 red) , (2,blue) , (3,pink) , (4,green) , (5,yellow);

//each循环遍历数组
@each $key , $val in $arr{
     li:nth-child( #{$key} ){
         color: $val;
     }
}

转化为css代码：

li:nth-child(1) {
  color: red;
}

li:nth-child(2) {
  color: blue;
}

li:nth-child(3) {
  color: pink;
}

li:nth-child(4) {
  color: green;
}

li:nth-child(5) {
  color: yellow;
}

Sass 混合器

sass混合器 也就是函数。

没有参数定义

$mixin 混合器名称{

       混合器程序

}

加载 选择器{

            @include 混合器名称;

         }

sass代码,如下所示：

//定义混合器
@mixin f1{
     -webkit-transition: all 2s;
     -moz-transition: all 2s;
     -ms-transition: all 2s;
     -o-transition: all 2s;
     transition: all 2s;
}

//调用混合器
div{
    @include f1;
}

转化为css代码：

div {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}

 带有参数定义

$mixin 混合器名称($参数1 ， $参数2 ...){

       混合器程序

}

加载 选择器{

            @include 混合器名称($实参1 , $实参2...);

         }

sass代码：

@mix f2 ($type , $time) {
    -webkit-transition: $type $time ;
    -moz-transition: $type $time ;
    -ms-transition: $type $time ;
    -o-transition: $type $time ;
    transition: $type $time ;
}
p{
    @include f2(width , 5s);
}

转化为css代码：

p {
  -webkit-transition: width 5s;
  -moz-transition: width 5s;
  -ms-transition: width 5s;
  -o-transition: width 5s;
  transition: width 5s;
}

带有参数的默认值定义

$mixin 混合器名称($参数1:默认值 ， $参数2:默认值 ...){

       混合器程序

}

加载 选择器{

               @include 混合器名称($实参1 , $实参2...);

         }

sass代码:

@mixin f3($type:all , $time:3s){
    -webkit-transition: $type $time ;
    -moz-transition: $type $time ;
    -ms-transition: $type $time ;
    -o-transition: $type $time ;
    transition: $type $time ;
}
h1{
    @include f3(height);
}

转化为css代码： 

h1 {
  -webkit-transition: height 3s;
  -moz-transition: height 3s;
  -ms-transition: height 3s;
  -o-transition: height 3s;
  transition: height 3s;
}

Sass 嵌套/继承

选择器1{}

选择器2{

       @extend 选择器1;

       选择器2自己的css样式

}

sass代码：

div{
   width: 100px;
   height:100px;
   border:2px soild red;
   background: blue;
}

p{
   //嵌套继承div选择器中的css样式
   @extend div;
   //定义自己的css样式
   backgrounnd: pink;
}

转化为css代码：

div,p{
  width: 100px;
  height: 100px;
  border: 2px solid red;
  background: blue;
}

p{
  background: pink;
}

Sass 特殊属性的设定

选择器{

属性:属性值{特殊属性：特殊属性值};

}

sass代码：

//可以在基本属性中设定指定样式的特殊属性
div{
    margin: 100px{top:50px};
    border:1px soild #000{bottom:3px soild #fff};
}

转化为css代码：

div {
  margin: 100px;
  margin-top: 50px;
  border: 1px solid #000;
  border-bottom: 3px solid #fff;
}

Sass 结构嵌套

选择器{

                    属性:属性值;

                    选择器{ 后代 }

                    >选择器{ 父子 }

                    +选择器{ 相邻兄弟 }

                    ~选择器{ 一般兄弟 }

                    &:伪类选择器{  }

                    &::伪元素选择器{  }      

                    .....

  }

sass代码：

div{
    width: 100px;
    height: 100px;

    p{
        width: 200px;
        height: 200px;
    }

    >span{
        width: 300px;
        height: 3000px;
    }

    +h1{
        width: 400px;
        height: 4000px;
    }

    ~h2{
        width: 500px;
        height: 500px;
    }

    &:hover{
        color: red;
    }
}

转化为css代码：

div {
  width: 100px;
  height: 100px;
}
div p {
  width: 200px;
  height: 200px;
}
div > span {
  width: 300px;
  height: 3000px;
}
div + h1 {
  width: 400px;
  height: 4000px;
}
div ~ h2 {
  width: 500px;
  height: 500px;
}
div:hover {
  color: red;
}

Sass文件的嵌套

@import '其他sass文件路径' ;

@import 指令可以让我们导入其他文件等内容。

举报

相关推荐

SASS/SCSS精华干货教程

linux运维服务器centos

Sass介绍及入门教程

csstwitterfacebook

Sass

css后缀预处理前端开发

超级简单的SASS教程和使用指南

cssruby嵌套编程语言

Sass文档

sasscss

SASS循环

sass前端css

SASS 学习

gem扩展sassscsscssLinux系统/运维

sass笔记

adobe前端javascript

vue sass

cssVue.js前端开发

Sass语法---sass的安装和引用

dockerconda容器
0 条评论