Sass入门——简介+语法格式及编译调试
本文来自慕课网大漠。
Sass简介
Sass和SCSS区别
$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也能用。
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
sass --watch test.scss:test.css --style expanded
nav ul {
margin:;
padding:;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
紧凑输出方式compact
sass --watch test.scss:test.css --style compact
nav ul { margin:; padding:; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
压缩输出方式compressed
nav ul{margin:;padding:;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
Sass入门——简介+语法格式及编译调试的更多相关文章
- Sass简介,安装环境,Sass的语法格式及编译调试
什么是 CSS 预处理器? 定义:CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进 ...
- SCSS语法格式及编译调试
一.SASS编译 Sass 的编译有多种方法: 命令编译 GUI工具编译 自动化编译 1.1 命令编译 1)单文件编译 sass <要编译的Sass文件路径>/style.scss:< ...
- Sass 语法格式及编译
一.sass语法格式 这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格.另外其不带有任何的分号和大括号.常常把这种格式称为 S ...
- php正则表达式入门-常用语法格式
php正则表达式入门-常用语法格式 原文地址:http://www.jbxue.com/article/24467.html 分享下php正则表达式中的一些常用语法格式,用于匹配字母.数字等,个人感觉 ...
- Sass入门:第二章
1.Sass语法格式 假设有这样一段CSS代码: body{ font : 100% Helvetica , sans-serif; color : #333; } Sass最初的语法格式 $font ...
- SASS学习笔记1 —— 安装、编译和调试
一.什么是SASS SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的 ...
- sass的简介,安装,语法。
一,sass的简介 1,Sass完全兼容所有版本的CSS.我们对此严格把控,所以你可以无缝地使用任何可用的CSS库. 2,Sass已经经过其核心团队超过8年的精心打造. 3,有无数的框架使用Sass构 ...
- Sass入门及知识点整理
Sass 快速入门 | SASS 中文网 文档链接:https://www.sasscss.com/getting-started/ 前言 之前整理了一篇关于Less的,现在就来整理一下关于Sass的 ...
- Sass入门指南
转自:http://www.imooc.com/article/1413 css预处理器已经算不上一个新鲜的词了,当前比较有代表性的css预处理器有sass.less.stylus.关于三者选择问题一 ...
随机推荐
- Effective MySQL之备份与恢复
五分钟成为一名DBA 如果我们已经有了一个MySQL生产级系统,而该产品却没有MySQL备份策略,那么我们至少应该做些什么呢?在采取任何备份策略之前,有许多有关数据库大小和存储策略引擎的用法的预备知识 ...
- RecyclerView 小记
RecyclerView,是在v7包加入的,一个灵活的view可以展示巨大的数据集,类似于listview的viewholder复用已经优化好了. 语言是苍白的,代码是最生动的叙说: 布局: < ...
- poj 3592 Instantaneous Transference 缩点+最长路
题目链接 给一个n*m的图, 从0, 0这个点开始走,只能向右和向下. 图中有的格子有值, 求能获得的最大值. 其中有些格子可以传送到另外的格子, 有些格子不可以走. 将图中的每一个格子都看成一个点, ...
- 转:批处理for命令详解
批处理for命令详解FOR这条命令基本上都被用来处理文本,但还有其他一些好用的功能!看看他的基本格式(这里我引用的是批处理中的格式,直接在命令行只需要一个%号)FOR 参数 %%变量名 IN (相关文 ...
- 改变QTreeView项高的方法(改变Delegate行高,或者::data取数据的时候,根据Qt::SizeHintRole进行判断)
很久之前写过一篇关于QTreeView快速显示超过千万条数据项的方法,如果说那篇文章讲的是QTreeView的内功的话,今天这篇是讲QTreeView的外功,有时我们想改变视图的数据项的行高,那怎么办 ...
- iOS开发中,应用内直接跳转到Appstore
iOS开发中,应用内直接跳转到Appstore 1.进入appstore中指定的应用NSString *str = [NSString stringWithFormat: ...
- web浏览器中的javascript 1
Html 文档嵌入客户端有4种方式. 1. 内联.放置在<script>和</script>标签对之间. 2.放置在<script>标签的src属性指定的外部文件中 ...
- java web分享ppt大纲 -- servlet包
概述 servlet相关代码所在包: javax.servlet javax.servlet.http 常用的功能模块 Servlet,filter,listener 常用的相关类: servlet ...
- 新建一个类并绑定一个activity
1.新建一个类(.java 文件),继承Android.app.Activity 2.新建一个activity 文件 3.重写onCreate 方法,设置绑定activity 文件 @Override ...
- zoj 1409 Communication System
/*如果要一个物体的多种属性,最好用结构体,不要用二维数组或者多维数组.用多维数组进行关键字排序很不稳定 */ /*给每个设备的所有价格排序,每个设备选取恰好比已知带宽大的价格(这个时候的比例最大) ...