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安装和语法的更多相关文章

  1. sass安装 使用

    一 什么是sass      sass是一种css开发工具.提供了很多便利的写法,使得css开发变得简单  易维护       sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一 ...

  2. SASS安装的那些事

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  3. 【css预处理器】------sass的基本语法------【巷子】

    001.安装sass 1.删除gem源:gem sources --remove https://rubygems.org/ 2.添加国内源:gem sources -a http://gems.ru ...

  4. Sass 安装到使用

    sass学习 Sass 可以通过以下三种方式使用:作为命令行工具:作为独立的 Ruby 模块 (Ruby module):或者作为 Rack-enabled 框架的插件(例如 Ruby on Rail ...

  5. sass 安装、配置,css规则

    http://blog.csdn.net/oyuemijindu/article/details/51036096 --sass 安装 一安装  1.ruby下载,可以到官网下载 ,注意如果是系统如果 ...

  6. Sass安装(windows版)

    Sass安装(windows版) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/download ...

  7. win下sass安装失败的一种可能

    首先声明,本篇转自CSDN的LZGS_4. 今天我也遇到这个问题,就把文章擅自转载了,方便自己也方便更多的人吧. 因为sass和compass依赖于ruby环境,所以装之前先确认装了ruby.可到官网 ...

  8. windows下sass安装 以及一些要注意的问题

    都说sass 环境难配其时也没那么难 按照以下步骤一下一下来还是挺快的 如果你是喜欢less 那就当我没说 233333 1.sass 是基于ruby这门语言的需要使用 rubygem这个包管理器安装 ...

  9. sass安装及使用

    在Mac系统下,Ruby一般已内置在其中,如果您不能确认是否已安装,或者说你不知道你的Ruby使用的版本,你可以打开你的命令工具: $ ruby -v 安装sass 在大多数情况和大部分人群中,还是喜 ...

随机推荐

  1. 控制页面打印的2种方法(css3的media媒体查询和window.print())

    在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYP ...

  2. Metasploit Framework(6)客户端渗透(上)

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 前五篇文章讲解了Metasploit Framewor ...

  3. ubuntu16.04 下鼠标变成十字形状无法点击情况解决

    出现这种问题的原因是把shell命令行终端当成了python环境,误输入了"import"命令. (当然如果你真的希望在shell中输入import指令除外...) 我自己想当然的 ...

  4. io模块及其API

    模块: io io.StringIO io.BytesIO 所包含API列表: io.StringIO.write: 写入字符 io.StringIO.getvalue: 获取写入的字符 io.Str ...

  5. C语言小笔记

    头文件的书写 头文件实现函数声明,在使用模板后可以实现一个C文件中即使重复包含某个头文件,在系统中用于只会确认为一个包含 头文件包含可以理解为将头文件内容替换#include“...”行 模板(don ...

  6. spark面试总结4

    Spark on Yarn面试篇04 1.MRV1有哪些不足? 1)可扩展性(对于变化的应付能力) a) JobTracker内存中保存用户作业的信息 b) JobTracker使用的是粗粒度的锁 2 ...

  7. 测试工具之Fiddler

    Fiddler是一款很好的抓包分析工具,里面有很多小功能,这里介绍常用功能 Fiddler下载地址: https://www.telerik.com/download/fiddler 下载完成后,直接 ...

  8. csv与xlsx导出

    一.csv与xlsx格式基本介绍       csv即comma seperate values - 逗号分隔值,文件以纯文本形式来存储表格数据,它可以由任意数目的记录组成,记录之间通过某种换行符来分 ...

  9. css笔记详解(1)

    css讲解 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 首先在我们学习css之前先来思考一个问题,为什么html标签上不直接 ...

  10. 使用 pandas 导出数据

    import pandas as pd # In[58]: df = pd.DataFrame(houselist) # In[59]: df # In[61]: df.to_csv('lianjia ...