易于书写阅读的CSS开发工具--SASS_html/css_WEB-ITnose
目前体验上非常满意,达到了预想中的效果,个人感觉比以前用过的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: #333body color: $cl
计算
$sz: 14px$ln: $sz * 1.5
嵌套(选择器、属性、伪类三种嵌套方式)
.index border: 1px solid #ccc top: 3px solid #999 radius: 5px a color: #666 &:hover,&.active #333
注释
/* 首页 *///导航条
代码重用
继承
html height: 100%.index @extend html
混合
@mixin txt () overflow: hidden white-space: nowrap text-overflow: ellipsis@mixin rads ($v: 2px) -webkit-border-radius: $v -moz-border-radius: $v border-radius: $v.index width: 200px @include txt @include rads(50%)
文件引用
@import '../base/set'
高级语句
条件
$cl: #333.index @if lightness($cl) > 30% color: #666 @else color: #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.index font-size: large(14px)还有颜色函数等,暂时没用得上的切合场景,API不算很少;SASS/SCSS/LESS不能直接与CSS比较谁更好,SASS/SCSS/LESS只是丰富CSS书写方式的工具,最终页面引用文件还是需要编译转化后的CSS文件
上一篇: 统计mssql server服务器有多少连接请求的语句
下一篇: PHP七种数据类型知识点总结