sass基础操作记录

sass是什么
基本操作
- 1. 安装
- 2. 使用
- 3. 基本用法
- - 3.1 变量
  - 3.2 计算功能
  - 3.3 嵌套
  - 3.4 注释
- 4. 代码的重用
- - 4.1 继承
  - 4.2 Mixin
  - 4.3 颜色函数
  - 4.4 插入文件
  - 5.1 条件语句
  - 5.2 循环语句
  - 5.3 自定义函数
参考链接

sass是什么

是css预处理器
基本思想：用一种专门的编程语言，进行网页样式设计，然后再编译成css文件

基本操作

1. 安装

需先安装Ruby，再安装SASS
安装Ruby后

gem install sass

2. 使用

文件后缀名.scss

显示.scss文件转换的css代码

sass text.scss

显示结果保存为文件

sass text.scss text.css

支持四个编译风格

nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。

一般使用最后一个

sass --style compressed test.sass test.css

可以监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本

sass --watch input.scss:output.css
sass --watch app/sass:public/stylesheets

3. 基本用法

3.1 变量

以$开头

$blue:#000
color: $blue

如果要嵌套，就写在#{}里面

$side : left;.rounded {border-#{$side}-radius: 5px;}

3.2 计算功能

top: 50px+100px
right: $val * 10%

3.3 嵌套

div{h1{color: red}
}

属性也可以嵌套

p {border: {　　　　　　color: red;}}

嵌套的代码可以用&引用父元素

a {&:hover { color: #ffb3ff; }}

3.4 注释

/*    */
//
/*!  */

4. 代码的重用

4.1 继承

.class1 {　　　　border: 1px solid #ddd;}.class2 {@extend .class1;
　　　　font-size:120%;}

4.2 Mixin

@mixin命令定义一个代码块

@mixin left {　　　　float: left;
　　　　margin-left: 10px;}

@include可以引用

div {@include left;}

可以指定参数

@mixin left($value: 10px) {　　　　float: left;
　　　　margin-right: $value;}
div {@include left(20px);}

4.3 颜色函数

lighten(#cc3, 10%) // #d6d65c

4.4 插入文件

@import "path/filename.scss";

5/高级用法

5.1 条件语句

@if

p {@if 1 + 1 == 2 { border: 1px solid; }@if 5 < 3 { border: 2px dotted; }}@if lightness($color) > 30% {　　　　background-color: #000;} @else {　　　　background-color: #fff;}

5.2 循环语句

@for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;}}$i: 6;@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;} @each $member in a, b, c, d {.#{$member} {　　　　　　background-image: url("/image/#{$member}.jpg");}}

5.3 自定义函数

@function double($n) {@return $n * 2;}#sidebar {　　　　width: double(5px);}

参考链接

SASS用法指南

sass基础操作记录相关推荐

01、Cadence使用记录之新建工程与基础操作（原理图绘制：OrCAD Capture CIS）
01.Cadence使用记录之新建工程与基础操作(原理图绘制:OrCAD Capture CIS) 硕士学电磁场去了,写点博客记录下学习过程. 参考的教程是B站的视频:allegro软件入门视频教程全 ...
【Substance Designer】基础操作和节点学习记录
写在前面这个记录稍微有点杂,大概是庄懂的技术美术入门课(美术向)-直播录屏-第20课和一些基础操作的记录合集吧! 补充学习发现,基础的节点是需要学习和记录的,但是真正用起来还是要多用多练!所以这种 ...
删除所有学生记录mysql_【MySQL】MySQL基础操作语句
mysql基础操作语句,包括数据库的增.删.切换,以及表的增.删.改.查.复制. 创建数据库 mysql> create database tem; 使用数据库 mysql> use te ...
【QGIS基础操作】QGIS插件功能记录
本系列用于总结项目过程中用到的QGIS基础操作.分析方法内容如下: 1. 线相交:将两矢量层在交点处产生点 2.缓冲区+相交:道路沿线100m的POI数量 3.距最近枢纽(线到枢纽):道路沿线最近的 ...
项目实战12.1—企业级监控工具应用实战-zabbix安装与基础操作
无监控,不运维.好了,废话不多说,下面都是干货. 警告:流量党勿入,图片太多!!! 项目实战系列,总架构图 http://www.cnblogs.com/along21/p/8000812.html ...
Linux下Mysql数据库的基础操作
Linux下Mysql数据库的基础操作一.Mysql数据介绍二.数据库相关术语介绍 1.数据库相关名词 2.相关术语介绍三.Mysql数据库的管理 1.创建数据库用户 2.查询用户状态 3.修改 ...
学习笔记Spark（七）—— Spark SQL应用（2）—— Spark DataFrame基础操作
二.Spark DataFrame基础操作 2.1.DataFrame DataFrame是一种不可变的分布式数据集,这种数据集被组织成指定的列,类似于关系数据库中的表. 数据集的每一列都带有名称和类 ...
ppt的一些基础操作
ppt的一些基础操作自定义访问工具栏和重置,自定义功能区和重置给ppt设置密码给PPT设置自动保存清除最近打开文件的记录自定义访问工具栏和重置,自定义功能区和重置第一种方法第二种方法给 ...
mysql+keepalived必须要lvs吗_MySQL 双主热备 + LVS + Keepalived 高可用操作记录
MySQL复制能够保证数据的冗余的同时可以做读写分离来分担系统压力,如果是主主复制还可以很好的避免主节点的单点故障.然而MySQL主主复制存在一些问题无法满足我们的实际需要:未提供统一访问入口来实现负 ...

sass基础操作记录

sass基础操作记录

sass是什么

基本操作

1. 安装

2. 使用

3. 基本用法

3.1 变量

3.2 计算功能

3.3 嵌套

3.4 注释

4. 代码的重用

4.1 继承

4.2 Mixin

4.3 颜色函数

4.4 插入文件

5.1 条件语句

5.2 循环语句

5.3 自定义函数

参考链接

sass基础操作记录相关推荐

最新文章

热门文章