sass

作者:神秘网友 发布时间:2021-02-23 13:20:21

sass

sass 是一个css的扩展语言,换编程的方式去编写css代码 sass的文件后缀有两种:1.scss 2.sass sass后缀的文件,写代码的时候,是没有大括号的,所有嵌套关系全部依赖空格换行 sass文件不能直接被浏览器识别,需要将sass文件转成css文件才能被html文件引入使用,被浏览器识别
编译工具:npm i sass -g 测试工具:sass --version 能出现版本号就说明下载成功能使用 编译命令: sass 被编译的文件 编译成功后的文件 监视命令: sass --watch 被编译的文件:编译成功的文件 监视文件夹变化: sass --watch 被编译的文件所在的文件夹:编译成功后的文件所在文件夹

eg:

div id="wrap"
    div class="content"
        div class="article"
            p
                span文字/span
            /p
        /div
    /div
/div

使用sass编写css:

#wrap{
    width: 300px;
    height: 300px;
    border:3px solid #ccc;
    .content{
        width: 250px;
        height: 250px;
        background-color: pink;
        .article{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            p{
                width: 150px;
                height: 150px;
                border:5px solid purple;
                span{
                    font-size: 20px;
                } 
            }
        }
    } 
}

编译sass成css:

npm i -g sass
sass test.sass index.css

编译后css文件和自己写的一模一样,但是在写的时候,就不会存在权重等问题了。

sass的编译

使用node进行编译sass的时候,首先要安装sass包。为了使用方便,直接在全局安装:

npm i -g sass

使用sass包来编译文件:

sass 待编译的sass文件路径 编译后的文件路径

我们每一次修改sass文件就需要重新编译一次,所以,node中的sass提供了一种实时编译,每次修改文件,自动进行编译:

sass --watch 待编译的sass文件路径:编译后的文件路径

如果写的文件比较多的话,每次写一个文件还需要重新实时编译一个文件,也不是特别方便,所以还有一种操作,直接实时监控文件夹:

sass --watch 待编译的sass文件夹:编译后的文件夹

sass的学习

sass文件的后缀分两种:.sass.scss,相对来说,.scss使用的比较多。

.scss的文件写法:

#wrap{
    width:100px;
}

.sass的文件写法:

#wrap
    width:100px

他们的区别在于有没有大括号和分号。我们已经习惯了写大括号和分号了,所以使用.scss的比较多。

sass的注释

// 单行注释,但是在编译的时候不保留
/*
多行注释
编译的时候可以保留
压缩的时候不保留
*/
/*!
多行注释
编译和压缩的时候都会保留
*/

变量

在sass中$来定义变量:

$color:red;
$font_size:12px;
.header{
    background-color: $color;
    font-size:$font_size*2;
}

嵌套

/*后代关系*/
.wrap{
    div{
        width:$font_size*10;
    }
}
/*子类关系*/
ul{
    li{
        padding:12px;
    }
}
/*大括号中表示自己*/
.nav{
    :hover{
        background-color: $color;
    }
    li{
        :hover{
            color:$color;
        }
    }
}
/*群组嵌套按正常写即可*/
/* 属性嵌套 */
.content{
    border: {
        style:solid;
        color:$color;
        width:2px;
    }
}
.left{
    border:1px solid #000{
        left:none;
        bottom:{
            width:3px;
        }
    };
}

编译之后

/*后代关系*/
.wrap div {
  width: 120px;
}

/*子类关系*/
ul  li {
  padding: 12px;
}

/*大括号中表示自己*/
.nav:hover {
  background-color: red;
}
.nav li:hover {
  color: red;
}

/*群组嵌套按正常写即可*/
/* 属性嵌套 */
.content {
  border-style: solid;
  border-color: red;
  border-width: 2px;
}

.left {
  border: 1px solid #000;
  border-left: none;
  border-bottom-width: 3px;
}

混合器

混合器可以理解为一个函数

定义混合器:

/* 定义混合器 */
@mixin bor{
    border:1px solid #000;
}
/* 使用混合器 */
.box{
    @include bor;
}
/* 带参数的混合器 */
@mixin bac($path,$color,$repeat){
    background:url($path) $color $repeat;
}
/* 使用混合器 */
.box1{
    @include bac("img/1.jpg",red,no-repeat);
}
/* 带有默认值的参数 */
@mixin bac($path:"img/1.jpg",$color:blue,$repeat:no-repeat){
    background:url($path) $color $repeat;
}
/* 使用混合器 */
.box2{
    @include bac("img/2.jpg",green);
}

编译结果:

/* 定义混合器 */
/* 使用混合器 */
.box {
  border: 1px solid #000;
}

/* 带参数的混合器 */
/* 使用混合器 */
.box1 {
  background: url("img/1.jpg") red no-repeat;
}

/* 带有默认值的参数 */
/* 使用混合器 */
.box2 {
  background: url("img/2.jpg") green no-repeat;
}

继承

当下面的选择器中需要使用到上面选择器的样式,就可以使用继承将上面拿下来使用,而省掉再写:

/* 继承 */
.box1{
    width: 100px;
    height: 100px;
}
.box2{
    @extend .box1;
    border:1px solid #000;
}

编译结果:

/* 继承 */
.box1, .box2 {
  width: 100px;
  height: 100px;
}

.box2 {
  border: 1px solid #000;
}

导入

在一个文件中定义变量和混合器,在写css的时候文件比较混乱,所以通常会将变量和混合器放在单独的文件中,通过命令导入进来,这样每个文件中的代码都是同一类

变量文件

$orange:orange;
$red:red;

混合器文件:

@mixin bor($style,$width,$color){
    border:$style $width $color;
}
@mixin bac($path,$color,$repeat){
    background:url($path) $color $repeat;
}

样式文件:

@import "./variable.scss";
@import "./mixin.scss";

.box{
    @include bor(solid,1px,$red);
}

编译后的css:

.box {
  border: solid 1px red;
}

sass 相关文章

  1. Oracle中的NULL和’’(空字符串)是一个意思

    摘自:http://www.cnblogs.com/memory4young/p/use-null-empty-space-in-oracle.html null 和 ’’ (空字符串)是一个意思 注: 为了便于区分空字符串和空格,下面的示例均以 _代表空格 举个例子: 1 --建表2 create table tbl_a (col_a varchar2(1), col_b

  2. 线程池的部分原理研究2

    基于上一个博客的研究,接下来针对具体的代码进行分析。 程序设计流程: 线程池初始化(n个线程) ---- 往线程池仍任务(n个任务) ---- 销毁线程池(n个线程) pool_init(int pnt) pool_add_worker pool_destroy() ((void *(*process) (void *arg), void *arg))

  3. Tesseract-OCR使用有感

    这玩意儿就只有一个Tesseract.dll 就算有其它的加上x64目录下的另外两个dllleptonica-1.80.0.dlltesseract41.dll也不过几兆而已,但是 但是 但是 加上字库文件可就大了 几十兆 。也充分说明了这玩意儿跟我原先说的一样的主要在于字库的匹配。如果只识别数字

  4. redis实现分布式锁

    概要 一个分布式锁需要满足以下三个条件: 分布式锁的加锁和释放锁要保证操作的原子性. 锁的拥有者因为异常退出, 锁在合理的时间范围内可以自动释放. 只有锁的拥有者可以释放锁. 使用 setnx key value 实现分布式锁的缺点: 没有设置超时时间, 获取锁的服务器

  5. 自动化构建初体验

    1、通过sass增强css的编程性 (1)在开发时添加构建环节 (2)在开发环节编写css样式 (3)通过工具将sass构建为css 2、具体操作 (1)创建项目目录 (2)yarn init初始化package.json (3)新建index.html index.html !DOCTYPE htmlhtml lang="en"head meta

  6. C++ map用法

    C++ map用法 map是STL的一个关联容器,它提供一对一(其中关键字只能在map中出现一次)的数据处理能力。 必须引入 #includemap map的定义 maptype1name, type2name maps;//第一个是键的类型,第二个是值的类型 mapstring, int maps;//也可以这样,需要C++11

  7. vue-router 路由守卫

    全局的:进入任何一个路由都会执行 beforeEach(to, from, next):进入路由前执行// 在渲染该组件的对应路由被 confirm 前调用// 不!能!获取组件实例 `this`// 因为当守卫执行前,组件实例还没被创建beforeResolve(to, from, next):在导航被确认之前,同时

  8. LeetCode 41. 缺失的第一个正数

    新手学习中,有任何错误或者更好地方法、思路欢迎指教! #Array 6 题目难度: 困难 题目描述: 给你一个未排序的整数数组 nums ,请你找出其中没有出现的最小的正整数。进阶:你可以实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案吗示例 1:输

  9. 每日一题力扣495

    题目: 在《英雄联盟》的世界中,有一个叫 “提莫” 的英雄,他的攻击可以让敌方英雄艾希(编者注:寒冰射手)进入中毒状态。现在,给出提莫对艾希的攻击时间序列和提莫攻击的中毒持续时间,你需要输出艾希的中毒状态总时长。 你可以认为提莫在给定的时间点

  10. NC218534 石子游戏(思维)

    这种以k为长度的,就想一个窗口一样,很多题都是按modk相等为一组判断的 这题也不例外,我们发现,将数组差分之后,相当于2-n都要是0,第一位是啥无所谓 那么从2开始枚举,因为第一位比较特殊,是啥无所谓,他们是0,如果当前小于0,那么我们在这把他补成0(

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词