星空网 > 软件开发 > 网页设计

易于书写阅读的CSS开发工具——SASS

最近接触了一款CSS预处理器——SASS,并部署应用于新项目中
目前体验上非常满意,达到了预想中的效果,个人感觉比以前用过的LESS语言更加丰富、更加优秀、更具有性价比
 

SASS简化了我们的CSS工作流,在样式设计时更轻松,并且更易于日常阅读维护

CSS本身是层叠样式表,并不算一门编程语言,为了丰富它的编程元素,于是出现了专为CSS而生的CSS预处理器,某种程度上也可以理解为编程语言
而SASS正是其中之一,它提供了变量、继承、语句等多样化用法,像编程语言一样书写CSS
 

SASS的安装与使用

安装

首先需要安装Ruby,然后才可以安装SASS

Ruby是啥楼主不懂也不关心,只知道SASS是Ruby开发的,写SASS不需要懂Ruby,但是想安装SASS得先安装Ruby

网上下载一个适合自己开发环境的Ruby版本,安装后运行命令行

gem -vruby -v

运行成功后返回版本号

易于书写阅读的CSS开发工具——SASS

本来可以直接安装SASS

gem install sass

因为被墙应该不会成功,于是只好迂回到淘宝RubyGems镜像安装SASS

gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l

运行成功最后返回源指向路径,注意源指向路径必须为唯一

易于书写阅读的CSS开发工具——SASS

再次安装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编辑器

易于书写阅读的CSS开发工具——SASS

注意文件开头声明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 < 10	$i: $i + 1	.module_#{$i}		background: url(../image/module_#{i}.png) 50% no-repeat$arr: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10)@each $i in $arr	.module_#{$i}		background: url(../image/module_#{i}.png) 50% no-repeat

自定义函数

@function large ($v)	@return $v * 1.5.index	font-size: large(14px)

 

还有颜色函数等,暂时没用得上的切合场景,API不算很少;SASS/SCSS/LESS不能直接与CSS比较谁更好,SASS/SCSS/LESS只是丰富CSS书写方式的工具,最终页面引用文件还是需要编译转化后的CSS文件

 




原标题:易于书写阅读的CSS开发工具——SASS

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

超级店长:https://www.ikjzd.com/w/1537
萌店:https://www.ikjzd.com/w/1538
万邑通:https://www.ikjzd.com/w/1539
Lighting Deals_LD秒杀:https://www.ikjzd.com/w/154
胜途跨境电商ERP:https://www.ikjzd.com/w/1540
通途ERP:https://www.ikjzd.com/w/1541
七月份适合去日本旅游吗 7月份去日本哪里好玩:https://www.vstour.cn/a/363192.html
凤岗汽车站到松山湖风景区 松岗汽车站到凤凰山怎么坐车:https://www.vstour.cn/a/363193.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流