本文来自慕课网大漠

Sass简介

Sass和SCSS区别

1、后缀名不同,很好理解
2、Sass以严格的缩进语法规则书写,不带大括号和分号;而SCSS的语法规则和CSS的语法很类似。
Sass:

$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量 body
font: 100% $font-stack
color: $primary-color

SCSS:

$font-stack: Helvetica, sans-serif;
$primary-color: #333; body {
font: 100% $font-stack;
color: $primary-color;
}

编译出来的CSS:

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

SCSS写法和CSS没什么区别,所以Sass大家更喜欢(什么鬼?)。简单说就是,你把.css改成.scss也能用。

安装Sass的过程我就省略了。
编译
命令编译
命令行、gulp/grunt、工具
输出方式
嵌套输出方式nested
Sass:
nav {
ul {
margin:;
padding:;
list-style: none;
} li { display: inline-block; } a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

编译时戴上参数"--style nested"

sass --watch test.scss:test.css --style nested
编译出来长这样:
nav ul {
margin:;
padding:;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }

展开输出方式expanded

编译时加参数 "--style expanded"
sass --watch test.scss:test.css --style expanded
跟nested毛区别都没有,就把闭合大括号另起一行放了。
nav ul {
margin:;
padding:;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

紧凑输出方式compact

编译时加参数 "--style compact"
sass --watch test.scss:test.css --style compact
同样没啥区别,把CSS放在一行
nav ul { margin:; padding:; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

压缩输出方式compressed

编译时加参数 "--style compressed"
这个区别稍微大了点,把注释和空格给去掉了
nav ul{margin:;padding:;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

 

Sass入门——简介+语法格式及编译调试的更多相关文章

  1. Sass简介,安装环境,Sass的语法格式及编译调试

    什么是 CSS 预处理器? 定义:CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进 ...

  2. SCSS语法格式及编译调试

    一.SASS编译 Sass 的编译有多种方法: 命令编译 GUI工具编译 自动化编译 1.1 命令编译 1)单文件编译 sass <要编译的Sass文件路径>/style.scss:< ...

  3. Sass 语法格式及编译

    一.sass语法格式 这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格.另外其不带有任何的分号和大括号.常常把这种格式称为 S ...

  4. php正则表达式入门-常用语法格式

    php正则表达式入门-常用语法格式 原文地址:http://www.jbxue.com/article/24467.html 分享下php正则表达式中的一些常用语法格式,用于匹配字母.数字等,个人感觉 ...

  5. Sass入门:第二章

    1.Sass语法格式 假设有这样一段CSS代码: body{ font : 100% Helvetica , sans-serif; color : #333; } Sass最初的语法格式 $font ...

  6. SASS学习笔记1 —— 安装、编译和调试

    一.什么是SASS SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的 ...

  7. sass的简介,安装,语法。

    一,sass的简介 1,Sass完全兼容所有版本的CSS.我们对此严格把控,所以你可以无缝地使用任何可用的CSS库. 2,Sass已经经过其核心团队超过8年的精心打造. 3,有无数的框架使用Sass构 ...

  8. Sass入门及知识点整理

    Sass 快速入门 | SASS 中文网 文档链接:https://www.sasscss.com/getting-started/ 前言 之前整理了一篇关于Less的,现在就来整理一下关于Sass的 ...

  9. Sass入门指南

    转自:http://www.imooc.com/article/1413 css预处理器已经算不上一个新鲜的词了,当前比较有代表性的css预处理器有sass.less.stylus.关于三者选择问题一 ...

随机推荐

  1. Effective MySQL之备份与恢复

    五分钟成为一名DBA 如果我们已经有了一个MySQL生产级系统,而该产品却没有MySQL备份策略,那么我们至少应该做些什么呢?在采取任何备份策略之前,有许多有关数据库大小和存储策略引擎的用法的预备知识 ...

  2. RecyclerView 小记

    RecyclerView,是在v7包加入的,一个灵活的view可以展示巨大的数据集,类似于listview的viewholder复用已经优化好了. 语言是苍白的,代码是最生动的叙说: 布局: < ...

  3. poj 3592 Instantaneous Transference 缩点+最长路

    题目链接 给一个n*m的图, 从0, 0这个点开始走,只能向右和向下. 图中有的格子有值, 求能获得的最大值. 其中有些格子可以传送到另外的格子, 有些格子不可以走. 将图中的每一个格子都看成一个点, ...

  4. 转:批处理for命令详解

    批处理for命令详解FOR这条命令基本上都被用来处理文本,但还有其他一些好用的功能!看看他的基本格式(这里我引用的是批处理中的格式,直接在命令行只需要一个%号)FOR 参数 %%变量名 IN (相关文 ...

  5. 改变QTreeView项高的方法(改变Delegate行高,或者::data取数据的时候,根据Qt::SizeHintRole进行判断)

    很久之前写过一篇关于QTreeView快速显示超过千万条数据项的方法,如果说那篇文章讲的是QTreeView的内功的话,今天这篇是讲QTreeView的外功,有时我们想改变视图的数据项的行高,那怎么办 ...

  6. iOS开发中,应用内直接跳转到Appstore

    iOS开发中,应用内直接跳转到Appstore 1.进入appstore中指定的应用NSString *str = [NSString stringWithFormat:                ...

  7. web浏览器中的javascript 1

    Html 文档嵌入客户端有4种方式. 1. 内联.放置在<script>和</script>标签对之间. 2.放置在<script>标签的src属性指定的外部文件中 ...

  8. java web分享ppt大纲 -- servlet包

     概述 servlet相关代码所在包: javax.servlet javax.servlet.http 常用的功能模块 Servlet,filter,listener 常用的相关类: servlet ...

  9. 新建一个类并绑定一个activity

    1.新建一个类(.java 文件),继承Android.app.Activity 2.新建一个activity 文件 3.重写onCreate 方法,设置绑定activity 文件 @Override ...

  10. zoj 1409 Communication System

    /*如果要一个物体的多种属性,最好用结构体,不要用二维数组或者多维数组.用多维数组进行关键字排序很不稳定 */ /*给每个设备的所有价格排序,每个设备选取恰好比已知带宽大的价格(这个时候的比例最大) ...