sass安装和语法
1.简介
sass 它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。这被叫做“css预处理器”（css preprocessor）。它提供了很便利的语法，节省了我们写css的时间。
2.安装
(1)首先确保你的电脑安装了 ruby （传送门 https://www.ruby-lang.org/zh_cn/downloads/）
// 控制台查看是否安装成功
ruby -v
(2)安装 sass
gem install sass
3.使用
（1）用编辑器 新建文件夹 demo ，在demo里新建文件 demo.scss ，代码如下
.list_1 {
ul {padding-left: 1.6rem;}
li {
border-bottom: 1px solid #ddd;padding-right: 1.6rem;
a {
display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;
background:url("../image/icon_goto.png") right center no-repeat;
background-size: auto 1.4rem;
padding-right: 1.5rem;
}
time {float: right;color: #999;}
}
}
（2）控制台 进入demo文件夹下
// demo.css 是生成后的css文件名
sass demo.scss demo.css
4.sass提供的四种编译风格
// nested：嵌套缩进的css代码，它是默认值。
// expanded：没有缩进的、扩展的css代码。
// compact：简洁格式的css代码。
// compressed：压缩后的css代码。
比如
sass --style compressed test.sass test.css
5.sass 语法
我觉得sass的格式和jade书写格式很像，结合sass的语法写了个demo,希望能帮助大家。
注意 ： 这里的是在控制台下直接用sass编译下的语法（不需要｛｝和；等），但是如果你需要在grunt下使用，请参考 http://www.w3cplus.com/sassguide/syntax.html
页面结构很简单，这里主要讲scss的常用语法，我写在注释里了。
丑丑页面预览：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="index.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="lay01">
<a href="#">cynthia</a>
<label for="">something</label> <br>
<br> <div class="lay01-1">
<h1>hello sass</h1>
</div>
</div>
</body>
</html>
css.scss
*
padding: 0
margin: 0
border: 0
outline: 0
font-size: 12px body
background: #f4f4f4 a
text-decoration: none
&:hover
cursor: pointer // each循环
$headings: (h1:2em,h2:1.5em,h3:1.2em)
@each $header,$size in $headings
#{$header}
font-size: $size // for循环
@for $i from 1 through 3
.item-#{$i}
width: 2em * $i // 多个字段的数据循环
$animal-data: (puma,black,default),(sea-sulg,blue,pointer),(egret,white,move)
@each $animal,$color,$cursor in $animal-data
.#{$animal}-icon
background: url(img/#{$animal}.png)
border: 1px #ddd solid
cursor: $cursor
css.scss生成的css.css
* {
padding: 0;
margin: 0;
border: 0;
outline: 0;
font-size: 12px; }
body {
background: #f4f4f4; }
a {
text-decoration: none; }
a:hover {
cursor: pointer; }
h1 {
font-size: 2em; }
h2 {
font-size: 1.5em; }
h3 {
font-size: 1.2em; }
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
.puma-icon {
background: url(img/puma.png);
border: 1px #ddd solid;
cursor: default; }
.sea-sulg-icon {
background: url(img/sea-sulg.png);
border: 1px #ddd solid;
cursor: pointer; }
.egret-icon {
background: url(img/egret.png);
border: 1px #ddd solid;
cursor: move; }
/*# sourceMappingURL=css.css.map */
index.scss
// 引入外部css文件
@import "css.css" // 变量
$blue:#1875e7 // 代码块
@mixin font1
font-family: 'Microsoft Yahei'
color: #ddd // 嵌套
.lay01
background: $blue
border: 1px #ddd solid
a
@include font1
// 计算
font-size: 16px - 1px
label
background: red
font-size: 12px
display: block
width: 100px
height: 30px
line-height: 30px
text-align: center
.lay01-1
width: 100px
height: 100px
background: yellow
h1
font-size: 20px
color: green
index.scss生成的index.css
@import url(css.css);
.lay01 {
background: #1875e7;
border: 1px #ddd solid; }
.lay01 a {
font-family: "Microsoft Yahei";
color: #ddd;
font-size: 15px; }
.lay01 label {
background: red;
font-size: 12px;
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center; }
.lay01 .lay01-1 {
width: 100px;
height: 100px;
background: yellow; }
.lay01 .lay01-1 h1 {
font-size: 20px;
color: green; } /*# sourceMappingURL=index.css.map */
sass安装和语法的更多相关文章
- sass安装 使用
一 什么是sass sass是一种css开发工具.提供了很多便利的写法,使得css开发变得简单 易维护 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一 ...
- SASS安装的那些事
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- 【css预处理器】------sass的基本语法------【巷子】
001.安装sass 1.删除gem源:gem sources --remove https://rubygems.org/ 2.添加国内源:gem sources -a http://gems.ru ...
- Sass 安装到使用
sass学习 Sass 可以通过以下三种方式使用:作为命令行工具:作为独立的 Ruby 模块 (Ruby module):或者作为 Rack-enabled 框架的插件(例如 Ruby on Rail ...
- sass 安装、配置，css规则
http://blog.csdn.net/oyuemijindu/article/details/51036096 --sass 安装 一安装 1.ruby下载,可以到官网下载 ,注意如果是系统如果 ...
- Sass安装（windows版）
Sass安装(windows版) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/download ...
- win下sass安装失败的一种可能
首先声明,本篇转自CSDN的LZGS_4. 今天我也遇到这个问题,就把文章擅自转载了,方便自己也方便更多的人吧. 因为sass和compass依赖于ruby环境,所以装之前先确认装了ruby.可到官网 ...
- windows下sass安装 以及一些要注意的问题
都说sass 环境难配其时也没那么难 按照以下步骤一下一下来还是挺快的 如果你是喜欢less 那就当我没说 233333 1.sass 是基于ruby这门语言的需要使用 rubygem这个包管理器安装 ...
- sass安装及使用
在Mac系统下,Ruby一般已内置在其中,如果您不能确认是否已安装,或者说你不知道你的Ruby使用的版本,你可以打开你的命令工具: $ ruby -v 安装sass 在大多数情况和大部分人群中,还是喜 ...
随机推荐
- Web发展简史（精编故事版，贤来给你讲故事）
Web发展简史 一. Web发展简史之隔壁老王的故事 有一个人叫隔壁老王,老王有一个爱好就是爱看电影.有一天,这个隔壁老王想看一部电影,可是电脑里面存储的电影太多了,他费了老大劲才从里面找到,觉得很不 ...
- 常见排序算法整理（python实现 持续更新）
1 快速排序 快速排序是对冒泡排序的一种改进. 它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行 ...
- 如何写gdb命令脚本
作为UNIX/Linux下使用广泛的调试器,gdb不仅提供了丰富的命令,还引入了对脚本的支持:一种是对已存在的脚本语言支持,比如python,用户可以直接书写python脚本,由gdb调用python ...
- ubuntu16.04 uninstall cuda 9.0 completely and install 8.0 instead
卸载cuda 9.0sudo apt-get --purge remove cudasudo apt autoremoveto remove cuda 9.0 Thensudo apt-get cle ...
- Python中使用PyCharm为函数及参数增加注释
在函数名中键入数遍光标,左上角亮起小灯泡,点击小灯泡 选中第二行内容 在"""后添加函数注释,以及参数注释 然后再引用函数时,选中函数,Ctrl q 即可显示函数以及参 ...
- OS之进程管理---多线程模型和线程库(POSIX PTread)
多线程简介 线程是CPU使用的基本单元,包括线程ID,程序计数器.寄存器组.各自的堆栈等,在相同线程组中,所有线程共享进程代码段,数据段和其他系统资源. 传统的的单线程模式是每一个进程只能单个控制线程 ...
- Java内存溢出异常（下）
此篇是上一篇文章Java内存溢出异常(上)的续篇,没有看过的同学,可以先看一下上篇.本篇文章将介绍剩余的两个溢出异常:方法区和运行时常量池溢出. 方法区和运行时常量池溢出 这部分为什么会放在一起呢?在 ...
- 利用 DynamicLinq 实现简单的动态表达式构建查询
平时使用 LINQ 进行一些简单的条件拼接查询一般都会这样操作: public class SearchInputDto { public string ConditionA { get; set; ...
- ubuntu16.04 服务器允许远程连接
ubuntu默认安装了openssh-client,openssh-server需要手动安装. 查看是否安装了ssh服务 apt-cache policy openssh-client openssh ...
- Ocelot简易教程（四）之请求聚合以及服务发现
上篇文章给大家讲解了Ocelot的一些特性并对路由进行了详细的介绍,今天呢就大家一起来学习下Ocelot的请求聚合以及服务发现功能.希望能对大家有所帮助. 作者:依乐祝 原文地址:https://ww ...