SASS详解

余学文发布于2019-08-29 11:29 / 2727人阅读

摘要：以前看到之类的工具觉得应该比较难，今天接触了之后发现挺好用的，主要是方便了的编写。具体可以看慕课网教程编译方法在命令行输入编译单个文件编译整个文件夹到文件夹也就是这样的语法下文中我都这样写。这里贴一张慕课网拿到的表格。

以前看到SASS之类的工具觉得应该比较难，今天接触了之后发现挺好用的，主要是方便了CSS的编写。在编写比较大的项目的时候，由于内容很多，因此样式表也会比较繁杂，如果要修改其中某一个的名字，就会维护起来很麻烦。因此才需要用到SASS这样的工具来优化CSS结构。

一般有SCSS和SASS两种，这两种的文件后缀名是不一样的，编写起来也会有差异。由于SCSS的写法更接近CSS，因此我比较喜欢SCSS的写法。（SASS是没有大括号的，仅仅用缩进来表示层次，这一点和python是很像的）

准备安装

由于SCSS是需要编译的。我就直接简略关于编译配置方法的环节。

安装ruby。http://rubyinstaller.org/downloads

命令行安装SASS。

安装好了可以在命令行调用sass --version。如果显示版本号就是安装好啦。

具体可以看慕课网SASS教程

编译方法

在命令行输入

sass srcFile.scss:destFile.css//编译单个文件
sass srcDir/:css/;//编译整个srcDir文件夹到css文件夹

也就是sass [s]:[d]这样的语法（下文中我都这样写）。

使用

刚刚是一些基本用法，还有一些参数可以用。

编译参数 1.--watch

上面的写法其实比较麻烦，因为我们一般写css都是会反复修改的，那么我们每次改了SCSS都需要再次编译，显得很麻烦。因此我们可以使用--watch参数监视每一次的更改，这样在修改CSS之后都会自动编译。具体如下：

sass --watch [src]:[dest];//src和dest既可以是文件也可以是文件夹

如果我们修改了SCSS，控制台就会输出

 Change detected to: scss/test.scss
      write scss/css/test.css
      write scss/css/test.css.map

2. style

由于不同的同学写CSS都有自己的习惯，因此这个参数就是为了让编译后的CSS更美观。
语法是sass --watch [src]:[dest] --style property这个property就是下面描述的内容。

nested

默认就是nested编译结果是最常见的书写方法。

body{
    p{
        color:red;
    }
    ul{
        background-color:green;
    }
}

编译结果

body p{
    color:red;}
body ul{
    background-color:green;}

expanded

就是编译出来的右大括号会另起一行

compact

输出的css会少很多换行

compressed

没有空格没有换行

.box,.size{margin-left:5px}

变量

SASS类似与一些编程语言。会先定义一些变量并给他们赋值，然后再在样式表中调用。这样我们在维护CSS的时候就只需要把这些变量的值修改就可以了，比较方便。废话不多说直接看代码：

$varGlobal:500px;
.container{
    $varLocal:20px;
    width:$varGlobal;
    height:$varLocal;
}

看上面的代码就知道，SASS引入了局部变量和全局变量，和其他语言用法差不多的就不赘述了。

嵌套

先前已经提到了结构的嵌套。还支持属性嵌套和伪类嵌套。

属性嵌套

比如font就有很多属性：font-size、font-weight等。我们可以这样嵌套

font:{
    size://
    weight://
}

注意font后面有一个冒号，不然就和结构嵌套是一样的了

伪类嵌套

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
      }
    &:after {
        clear:both;
        overflow: hidden;
      }
}

用法就是加一个&:
调用混合宏

混合宏

感觉这个是SASS的比较强大的地方，先看代码

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
button {
    @include border-radius;
}

这时候编译结果为

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

相当于就是一个代码块的调用。另外混合宏还可以传入参数

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

相当于是一个函数的写法了。在调用的时候传入参数即可

.box {
  @include border-radius(3px);
}

还可以给默认值

@mixin border-radius($radius：3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

注意css中都是用冒号表示相等。不用等号

带@的语句一般都不加冒号，直接空格

继承

.size{
    background-color:#777;
}
.box{
    @extend .size;
}

占位符

%placeholder

这种写法在不调用之前不会产生任何css代码。我个人感觉比较像是一个基类。用法就是和继承一样的。

.body{
    @extend %placeholder
}

这里贴一张慕课网拿到的表格。

SASS基础就先写到这里，还有很多高级用法以后再补充~

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111680.html

资源集 - 收藏集 - 掘金

摘要：行爬取顶点全网任意小说掘金之前连续多篇文章介绍客户端爬取平台，今天我们从零开始，实现爬取顶点小说网任意一本小说的功能。文件标记所有文件我的后端书架后端掘金我的后端书架月前本书架主要针对后端开发与架构。 30行js爬取顶点全网任意小说 - 掘金之前连续多篇文章介绍客户端爬取平台(dspider)，今天我们从零开始，实现爬取顶点小说网任意一本小说的功能。如果你还不知道客户端爬取，可以先看...

stdying 2019-07-25 12:06 评论0 收藏0
资源集 - 收藏集 - 掘金

摘要：行爬取顶点全网任意小说掘金之前连续多篇文章介绍客户端爬取平台，今天我们从零开始，实现爬取顶点小说网任意一本小说的功能。文件标记所有文件我的后端书架后端掘金我的后端书架月前本书架主要针对后端开发与架构。 30行js爬取顶点全网任意小说 - 掘金之前连续多篇文章介绍客户端爬取平台(dspider)，今天我们从零开始，实现爬取顶点小说网任意一本小说的功能。如果你还不知道客户端爬取，可以先看...

马忠志 2019-08-15 10:42 评论0 收藏0
CSS Modules详解及React中实践

摘要：上例中打印的结果是对中的名都做了处理，使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器，所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...

wemall 2019-08-30 15:45 评论0 收藏0
从基础到实战手摸手带你掌握新版Webpack4.0详解一起读文档

摘要：构建构建就是把源代码转换成发布到线上的可执行代码，包括如下内容。自动刷新监听本地源代码的变化，自动重新构建刷新浏览器。自动发布更新完代码后，自动构建出线上发布代码并传输给发布系统。将文件放入到项目中，在中新建一个放字体图标的文件夹。项目地址 github.com/wudiufo/Web… 知识点概览： Loader，HMR ,Create React App, Caching, Plug...

王军 2019-05-23 17:31 评论0 收藏0
webpack4配置详解之逐行分析

摘要：今天就尝试着一起来聊聊吧，旨在帮大家加深理解新手更容易上路，都能从到搭建配置自定属于自己的脚手架，或对已封装好的脚手架有进一步的巩固，接下来苏南会详细讲解中的每一个配置字段的作用部分为新增。 showImg(https://segmentfault.com/img/bVbjmMV?w=1008&h=298); 前言　　经常会有群友问起webpack、react、redux、甚至cre...

dkzwm 2019-08-23 13:04 评论0 收藏0