最近接触了一款CSS预处理器??SASS，并部署应用于新项目中
目前体验上非常满意，达到了预想中的效果，个人感觉比以前用过的LESS语言更加丰富、更加优秀、更具有性价比
SASS简化了我们的CSS工作流，在样式设计时更轻松，并且更易于日常阅读维护
CSS本身是层叠样式表，并不算一门编程语言，为了丰富它的编程元素，于是出现了专为CSS而生的CSS预处理器，某种程度上也可以理解为编程语言
而SASS正是其中之一，它提供了变量、继承、语句等多样化用法，像编程语言一样书写CSS
SASS的安装与使用
安装
首先需要安装ruby，然后才可以安装sass
Ruby是啥楼主不懂也不关心，只知道SASS是Ruby开发的，写SASS不需要懂Ruby，但是想安装SASS得先安装Ruby
网上下载一个适合自己开发环境的Ruby版本，安装后运行命令行
gem -vruby -v
登录后复制
运行成功后返回版本号
立即学习“前端免费学习笔记（深入）”；
本来可以直接安装SASS
gem install sass
登录后复制登录后复制
因为被墙应该不会成功，于是只好迂回到淘宝RubyGems镜像安装SASS
gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l
登录后复制
运行成功最后返回源指向路径，注意源指向路径必须为唯一
立即学习“前端免费学习笔记（深入）”；
再次安装SASS
gem install sass
登录后复制登录后复制
升级SASS
gem update sass
登录后复制
使用
运行命令行直接看编译后的CSS代码，这样并没什么实际作用
sass init.sass
登录后复制
把SASS文件编译转化为CSS文件
sass init.scss init.css
登录后复制
我们有SASS作为开发文件，所以一般在编译CSS文件时候直接选择压缩
sass --style compressed init.sass init.css
登录后复制
SASS提供了四种编译风格，自己私下可以逐一体验
nested：嵌套并且缩进，默认值expanded：嵌套但不缩进compact：简洁格式compressed：压缩
登录后复制
监听SASS文件，发生变动时自动编译转化为CSS文件
sass --watch init.scss:init.css --style compressed
登录后复制
编译过程中，如有语法错误则会编译失败，命令行与CSS文件都会提供具体错误信息
安装WebStorm编辑器
Sublime、Dreamweaver都弱爆了，下载安装个WebStorm编辑器才能和SASS好好玩耍
国际惯例，晒一下WebStorm编辑器
立即学习“前端免费学习笔记（深入）”；
注意文件开头声明UTF8编码，不然注释里如有中文编译时会报错
@charset "utf-8"
登录后复制
SASS语法
基本用法
变量
$cl: #333bodycolor: $cl
登录后复制
计算
$sz: 14px$ln: $sz * 1.5
登录后复制
嵌套（选择器、属性、伪类三种嵌套方式）
.indexborder: 1px solid #ccctop: 3px solid #999radius: 5pxacolor: #666&:hover,&.active#333
登录后复制
注释
/* 首页 *///导航条
登录后复制
代码重用
继承
htmlheight: 100%.index@extend html
登录后复制
混合
@mixin txt ()overflow: hiddenwhite-space: nowraptext-overflow: ellipsis@mixin rads ($v: 2px)-webkit-border-radius: $v-moz-border-radius: $vborder-radius: $v.indexwidth: 200px@include txt@include rads(50%)
登录后复制
文件引用
@import '../base/set'
登录后复制
高级语句
条件
$cl: #333.index@if lightness($cl) > 30%color: #666@elsecolor: #999
登录后复制
循环语句
@for $i from 1 to 10.module_#{$i}background: url(../image/module_#{i}.png) 50% no-repeat$i: 0@while $i 自定义函数
@function large ($v)@return $v * 1.5.indexfont-size: large(14px)
登录后复制
还有颜色函数等，暂时没用得上的切合场景，API不算很少；SASS/SCSS/LESS不能直接与CSS比较谁更好，SASS/SCSS/LESS只是丰富CSS书写方式的工具，最终页面引用文件还是需要编译转化后的CSS文件
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2840214.html
