【sass】安装及入门教程

文章目录

一、基本介绍
二、安装教程
三、编译教程
- 3.1、单次编译
- 3.2、实时编译
- 3.3、实时监控目录

一、基本介绍

sass是世界上最好的css扩展语言。在正常的编写css的基础上，增加了很多变量，函数，循环，判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数（如颜色加深，颜色淡化）用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。

css编写时权重难以控制，嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。
sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用。
html 结构

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

使用css编写样式：

#wrap .content{}
#wrap .content .article{}
#wrap .content .article p{}
#wrap .content .article p span{}

使用sass编写样式：

#wrap{.content{.article{p{span{} }}}
}

二、安装教程

sass 基础语法教程链接：https://blog.csdn.net/qq_45677671/article/details/114579594

以前的 sass 需要依赖一个 ruby 的环境
现在的 sass 需要依赖一个 python 的环境
但是我们的 node 强大了以后，我们只需要依赖 node 环境也可以
需要我们使用 npm 安装一个全局的 sass 环境就可以了
安装全局 sass 环境：npm install sass -g
检查是否安装成功：sass --version

三、编译教程

有了全局的 sass 环境以后，我们就可以对 sass 的文件进行编译了
sass 的文件后缀有两种，一种是 .sass 一种是 .scss
他们两个的区别就是有没有 {} 和 ;
.scss文件

h1 {width: 100px;height: 200px;
}

.sass 文件

h1 width: 100pxheight: 200px

3.1、单次编译

我们比较常用的还是 .scss 文件，因为 .sass 我们写不习惯，当然，如果你能写习惯也比较好用
我们先不管里面的的什么内容，至少这个 .scss 或者 .sass 文件浏览器就不认识
我们就要用指令把这两种文件变成 css 文件
编译命令：sass 被编译的文件编译后的文件名
例如：sass index.scss index.css
这样我们就能得到一个 css 文件，在页面里面也是引入一个 css 文件就可以了

3.2、实时编译

上面的编译方式只能编译一次
当你修改了文件以后要从新执行一遍指令才可以
实时编译就是随着你文件的修改，自动从新编译成 css 文件
监视文件变化的命令：sass --watch 被编译的文件:编译后的文件
例如：sass --watch index.scss:index.css
然后你只要修改 index.scss 文件的内容，index.css 文件中的内容会自动更新

3.3、实时监控目录

之前的实时监控只能监控一个文件
但是我们有可能要写很多的文件
所以我们要准备 2 个文件夹，一个放 sass 文件，一个放 sass 编译后的 css 文件。文件夹名称就叫 sass 和 css
监视文件夹变化的命令：sass --watch 被编译的文件所在文件夹:编译后文件所在文件夹
例如：sass --watch sass:css
这样，只要你修改 sass 文件夹下的内容，就会实时的相应在 css 文件夹中
你新添加一个文件也会实时响应
但是你删除一个文件，css 文件夹中不会自动删除，需要我们自己手动删除

【sass】安装及入门教程相关推荐

Ubuntu虚拟机安装与入门教程
Ubuntu虚拟机安装与入门教程首先到Maxcell主页(http://www.maxcell.com.cn),仅限内网,下载Ubuntu虚拟机.iso,加载或者解压该文件,里面包括虚拟机软件V ...
python人脸识别库教程_OpenCV-最优秀的Python人脸识别库安装及入门教程
OpenCV库(open source computer vision library)是一个基于BSD许可(开源)发行的跨平台计算机视觉和机器学习软件库,可以运行在Linux.Windows.And ...
kanzi安装和入门教程
安装kanzi 系统要求在 PC 上:64 位 Windows 7 SP1.8.1 和 10 Anniversary Update(1607 版)或更新版本在 Mac 上:Boot Camp 中的 ...
Kafka安装启动入门教程
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言本文讲如何安装启动kaf ...
笔记 | PyTorch安装及入门教程
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文内容概述如何安装PyTorch以及PyTorch的一些简单操作 ...
windows下Graphviz安装及入门教程
下载安装配置环境变量 intall 配置环境变量验证基本绘图入门 graph digraph 一个复杂的例子和python交互发现好的工具,如同发现新大陆.有时,我们会好奇,论文中.各种专业的 ...
windows 下 Graphviz 安装及入门教程以及 PlantUML
From:http://m.blog.csdn.net/lanchunhui/article/details/49472949 开源工具---使用简单的文字描述画UML图之PlantUML官网:htt ...
宝塔 linux面板,宝塔Linux面板安装使用入门教程_Linux系统云服务器/云服务器/独立服务器建站面板安装入门教程...
宝塔Linux面板是一款非常好用且使用简单的Linux系统云服务器.云服务器.独立服务器运维面板!支持一键LAMP.LNMP.集群.监控.网站.FTP.数据库.JAVA等100多项服务器管理功能.为L ...
Ubuntu 16.04 中文版安装基础入门教程
安装Ubuntu16.04 1.进入 live cd 桌面 1)安装盘下载地址:http://releases.ubuntu.com/16.04/,可以用硬盘启动,也可以刻成光盘启动进入后找蓝色链 ...

【sass】安装及入门教程

文章目录

一、基本介绍

二、安装教程

三、编译教程

3.1、单次编译

3.2、实时编译

3.3、实时监控目录

【sass】安装及入门教程相关推荐

最新文章

热门文章