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.关于三者选择问题一 ...
随机推荐
- Asp.Net Core WebApi学习笔记(四)-- Middleware
Asp.Net Core WebApi学习笔记(四)-- Middleware 本文记录了Asp.Net管道模型和Asp.Net Core的Middleware模型的对比,并在上一篇的基础上增加Mid ...
- ComboBox控件绑定数据源
最近在研究机房收费系统的组合查询的方法时,看到了ComboBox控件可以进行数据绑定,我觉得这个功能真的很不错,可以给我省去很多的麻烦. 下面是我组合查询窗体界面 一.数据转换方法 现在我们开看一下我 ...
- Codeblock解决注释乱码问题及在ubuntu中程序运行时乱码问题。
(1)修改源文件保存编码在:settings->Editor->gernal settings>other settings 看到左边的Encoding group Box,改为WI ...
- CH Round #57 - Story of the OI Class 凯撒密码
很有意思的一道题目 考场上想的是HASH成一个整数,把末位asicc码值*1,依次乘*10,得到一个整数,然后利用等差性.唯一性快排Nlogn乱搞的 证明如下: 对于明文abcde 密文 bcdef ...
- Android项目中包名的改动
通常改动包名时会造成R文件错误,而且有时带有原因不明的Manifest文件里多处文本混乱. 所以,将眼下觉得最为简洁方便的改动包名流程记录例如以下: 如果我们眼下的包名为com.pepper.util ...
- C/C++指针的指针(**p)和指针的引用(*&)使用案例分析
#include <stdio.h> #include <unistd.h> #include <fcntl.h> #include <stdlib.h> ...
- linux 虚拟文件系统----------Virtual File System VFSkky
在了解虚拟文件系统之前,必须先知道什么是 Kernal Space 与 User Space. Kernal Space 与User Space 的差别,在于内存使用上安全机制的差异. kerna ...
- 【中英对照】【EntLib6】【Unity】实验1:使用一个Unity容器
Lab 1: Using a Unity Container 实验1:使用一个Unity容器 Estimated time to complete this lab: 15 minutes 估计完成时 ...
- 简单天气应用开发——API接口
寒假回家无事,想到自学iOS开发已有一段时间,还没做过真正自己的应用,就起了做一个天气预报App的念头. 想到就做.天气预报第一步自然是找到好用的API接口来获取天气信息.在百度上搜索了一圈,找到的都 ...
- Delphi 类型转换函数(有几个函数没见过,FloatToStrF,FloatToText等等)
Chr 将一个有序数据转换为一个ANSI字符 Ord 将一个有序类型值转换为它的序号 Round 转换一个实型值为四舍五入后的整型值 Trunc 转换一个实型值为小数截断后的整型值 Int 返回浮点数 ...