安装

  1. 下载ruby并且安装 点击这里
  2. 打开命令行输入 gem install sass
  3. 我使用的是sublime text3 还需要下载三个插件
    • sass -- 可以帮助你语法高亮
    • sass build -- 可以通过Ctrl+B来编译文件
    • SublimeOnSaveBuild -- 帮助你在保存的时候编译

      4.编译的命令
    • 单个文件转换

      sass style.scss style.css
    • 单文件监听

      sass --watch style.scss:style.css
    • 文件夹监听

      sass --watch sassFileDirectory:cssFileDirectory
    • 命令行其他配置项
      • --style表示解析后的css是什么格式,有四种取值分别为:nested,expanded,compact,compressed。
      • --sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。
      • --debug-info表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。

常用语法入门

1.变量
sass中可以定义变量,方便统一修改和维护

输入:

$fontFamily: SimSun;

$baseColor: #333;

body {

font-family: $fontFamily;

color: $baseColor;

}

生成:

body {
font-family: Helvetica, sans-serif;
color: #333;
}

2.嵌套
sass可以进行选择器的嵌套,表示层级关系

输入:

div {

ul {

margin: 0;

padding: 0;

list-style: none;

}

li { display: inline-block;float:left; }

a {

display: block;

padding: 6px 12px;

text-decoration: none;

}

}

生成:

div ul {
margin: 0;
padding: 0;
list-style: none;
} div li {
display: inline-block;
float:left;
} div a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

3.导入
在sass中导入其他的sass文件,最终生成一个sass文件

输入:

_base文件代码:

html,

body,

ul,

ol {

margin: 0;

padding: 0;

}

当前文件代码:

@import '_base';

body {

font-size: 100%;

background-color: #666;

}

生成:

html, body, ul, ol {
margin: 0;
padding: 0;
} body {
font-size: 100%;
background-color: #666;
}

4.mixin
sass中可用mixin定义一些代码段,可传参数,方便处理css3前缀

输入:

@mixin box-sizing ($sizing) {

-webkit-box-sizing:$sizing;

-moz-box-sizing:$sizing;

box-sizing:$sizing;

}

.box-border{

border:1px solid #ccc;

@include box-sizing(border-box);

}


生成:
```css
.box-border {
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

5.拓展/继承
sass可通过@extend来实现代码组合声明

输入:

.message {

border: 1px solid #ccc;

padding: 10px;

color: #333;

}

.success {

@extend .message;

border-color: green;

}

.error {

@extend .message;

border-color: red;

}

生成:

.message, .success, .error{
border: 1px solid #cccccc;
padding: 10px;
color: #333;
} .success {
border-color: green;
} .error {
border-color: red;
}

6.运算
sass可进行简单的加减乘除运算

输入:

.container { width: 100%; }

article[role="main"] {

float: left;

width: 600px / 960px * 100%;

}

aside[role="complimentary"] {

float: right;

width: 300px / 960px * 100%;

}

生成:

.container {
width: 100%;
} article[role="main"] {
float: left;
width: 62.5%;
} aside[role="complimentary"] {
float: right;
width: 31.25%;
}

7.颜色
sass中集成了大量的颜色

输入:

$linkColor: #08c;

a {

text-decoration:none;

color:$linkColor;

&:hover{

color:darken($linkColor,10%);

}

}

生成:

a {
text-decoration: none;
color: #0088cc;
}
a:hover {
color: #006699;
}

sass相关随笔的更多相关文章

  1. SASS相关

    1.安装ruby http://rubyinstaller.org/downloads/ 2.安装SASS gem sources --remove https://rubygems.org/ gem ...

  2. SSM框架之AOP、动态代理、事务处理相关随笔

    AOP: 原理:底层利用动态代理(两种动态代理技术都使用了) 两种实现方案: 第一种:JDK动态代理技术 实现的InvocationHandler接口,要想实现某个类的动态代理对象,必须有接口有实现类 ...

  3. vue-baidu-map相关随笔

    一,使用vue-baidu-map 1.下载相关包依赖 npm i vue-baidu-map   2.在main.js中import引入相关包依赖,在main.js中添加如下代码: import B ...

  4. nuxt.js相关随笔

    对于nuxt.js从未接触,对于项目需要进行零散了解,作此归纳,以下都是一个新手的拙见与理解,有不同意见欢迎提出,但请勿喷. 一.项目创建 npx create-nuxt-app projectNam ...

  5. H264相关随笔

    DR(Instantaneous Decoding Refresh)--即时解码刷新. I和IDR帧都是使用帧内预测的.它们都是同一个东西而已,在编码和解码中为了方便,要首个I帧和其他I帧区别开,所以 ...

  6. js(jQuery)相关随笔

    //获取所有name='id'.被选择的的多选框var idArr = $("input[type='checkbox'][name='id']:checked");//将这些多选 ...

  7. Hive相关随笔

    1).Hive中Select Top N的实现 Hive中使用 Order by + Limit 可以很容易地实现Select Top N. 但是在Hive中Order by只能使用1个Reduce, ...

  8. Spring Mvc相关随笔

    web.xml部分 1.欢迎界面 <welcome-file-list> <welcome-file>/views/login.jsp</welcome-file> ...

  9. Sass关于颜色函数的乐趣

    阅读目录 1. 了解RGB和HSL颜色标准 2. RGB函数 3. HSL函数 4. Opacity函数 5. 其他颜色函数 6. 一个简单的应用 在Sass中,定义了很多现成的函数,可供我们使用.在 ...

随机推荐

  1. mac上如何查看gif

    今天生成了一个gif,结果用mac自带的图片预览功能打开,图片被切成一张一张的,不是动图效果了.原以为还得下第三方看图软件,后来百度下发现mac本身也可以打开. 方法一: 鼠标右击图片,选择“快速查看 ...

  2. spring 4.0 注解数据验证1

    通常情况下,数据验证都分为前台验证,后台验证.并且前台JS验证是肯定有的,那么其实验证的错误信息根本不必通过后台传过去,哪怕就是想国际化,前台JS也能够胜任. 如果前台验证足够了,那么如果还有不正确的 ...

  3. Luogu 2258 [NOIP2014] 子矩阵

    被普及组虐了,感觉

  4. SPOJ-TTM To the moon

    一句话题意:写一个支持区间修改,区间求和的可持久化数据结构. 考虑使用主席树,然而,区间修改怎么办? 似乎有标记永久化的方法. 对于线段树上完全覆盖标记产生贡献的区间,我们直接打上一个$tag$,而对 ...

  5. Struts2学习第七课 通配符映射

    一个WEB应用可能有长百上千个action声明,可以利用struts提供的通配符映射机制吧多个彼此相识的映射关系简化为一个映射关系. 通配符映射规则: --若找到多个匹配,没有通配符的那个将胜出(精确 ...

  6. EFK Stack容器部署

    基础环境 安装docker # curl -sSL http://acs-public-mirror.oss-cn-hangzhou.aliyuncs.com/docker-engine/intern ...

  7. Redis常见7种使用场景(PHP)

    转发:https://www.jianshu.com/p/2f3add45351b Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并 ...

  8. 2010辽宁省赛E(Bellman_Ford最短路,状态压缩DP【三进制】)

    #include<bits/stdc++.h>using namespace std;const int inf=0x3f3f3f3f;struct node{    int v,z,d, ...

  9. Ocelot(二)- 请求聚合与负载均衡

    Ocelot(二)- 请求聚合与负载均衡 作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/10865511.html 源码地址: ...

  10. Nginx + Tomcat7 + redis session一致性问题

    Nginx 作负载均衡时,由于是每次都需要把请求分发到不同的机器,同一个用户在一台机器上创建了 session,下一次的请求很有可能会转发到另外一台机器,会造成 session 丢失.我们可以使用 R ...