scss编译
SASS?
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
sass有两种后缀名文件:
- sass(不使用大括号和分号)---不建议使用
- scss(使用大括号和分号)----普遍使用
导入:
@import "reset.css";
sass有两种注释方式:
- 标准的css注释方式
- //双斜杆形式的单行注释(单行注释不会被转译出来。)
SASS提供四个编译风格的选项:
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
scss---->
1. 变量必须是$开头
2. !default-----默认值
默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可
特殊变量一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
多值变量
list类型(通过空格,逗号或小括号分隔多个值,可用nth($var,$index)取值)
map类型(以key和value成对出现,其中value又可以是list)
简单来说list类型有点像js中的数组,而map类型有点像js中的对象。
SCSS允许在代码中使用算式:
body {
margin: (14px/);
top: 50px + 100px;
right: $var * %;
}
条件语句:
p {
@if + == { border: 1px solid; }
@if < { border: 2px dotted; }
}
循环语句:
1. @for $var from <start> through <end>
2. @for $var from <start> to <end>。
PS: $i(变量),start(起始值),end(结束值)
@for $i from to {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
scss编译的更多相关文章
- CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
sass.less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...
- scss 编译方法
第一种: 手动创建 scss文件夹 用Node.js command promt 进入项目目录 在项目目录下面 输入 sass scss/main.scss css/main.css s ...
- webpack实现scss编译配置
1.webpack.start.js: var webpack = require('webpack'); var SpritesmithPlugin = require('webpack-sprit ...
- 安装Ruby、Sass在WebStrom配置Scss编译环境css自动压缩
安装Sass和Compass sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先 ...
- koala编译scss文件时不支持中文字体的解决方案
第一种方案:在scss文件第一行加上这行代码@charset "utf-8"; 第二种方案: scss文件编译时候使用ruby环境,出现 Syntax error: Invalid ...
- webstorm编译less和scss
Webstorm 配置less编译的Arguments参数: $FileName$ $FileParentDir$\ccy\ccy1\ccy2\$FileNameWithoutExtension$.c ...
- 让webStorm支持自动监听编译scss文件
前提概要 今日,重装了两波系统,,,之前安装的各种环境都忘光了,重新又踩一次坑的感觉很不舒服,所以记录一下配置自动编译scss一路遇到的坑 一.webstrom run的时候控制台输出的错误中文提示乱 ...
- sass/scss 和 less的区别
一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...
- [Sass]命令编译
[Sass]命令编译 命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass.这种编译方式是最直接也是最简单的一种方式.因为只需要在你的命令终端输入: 单文件编译: sass & ...
随机推荐
- Media Queries使用方法
1. 最大宽度max-width “max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效.如: @media screen and (max-width ...
- ajaxfileupload 传参数
引用:http://www.cnblogs.com/lyeo/archive/2012/05/11/2496261.html 直接上代码: var data = { name: 'my name', ...
- FRM-40400:事务完成:已应用和保存X条记录"消息框不显示处理方法
oldmesl := :system.message_level; :system.message_level :;--不显示长度超过25的信息 do_key('COMMIT_FORM'); :sys ...
- css2 [lang|=en] 误区
[lang|=en] w3c说明:css2选择器,选择以en开头的的lang属性. w3c的这个解释是有误区的,en开头,但是en后面必须要有-,也就是说是选择的是en-开头
- url编码
url编码 情况1:网址路径中包含汉字 打开IE,输入网址”http://zh.wikipedia.org/wiki/春节”.注意,”春节”这两个字此时是网址路径的一部分. 查看HTTP请求的头信息, ...
- 查询和删除表中重复数据sql语句
1.查询表中重复数据.select * from peoplewhere peopleId in (select peopleId from people group by ...
- python常用小模块使用汇总
在写代码过程中常用到一些好用的小模块,现整理汇总一下: 1.获取当前的文件名和目录名,并添到系统环境变量中. file = os.path.abspath(__file__) ...
- 大规模web 服务开发技术
<大规模web 服务开发技术> 是一本讲解大型Web 应用的入门级书籍,能够让我们接触到大应用的知识点. 目录如下: 第1章 大规模Web服务的开发定位——掌握整体第2章 大规模数据处 ...
- PHP动态图像的创建要如何实现呢?
with-gd=[/path/to/gd] --with-jpeg-dir=[/path/to/jpeg-6b] --with-t1lib=[/path/to/t1lib] 完成添加后执行make命 ...
- JS的兼容函数
获取类名的兼容函数 //obj.getElementsByClassName 只能在现代浏览器中使用,不能在IE8以下使用 //两个参数 classname 类名 obj 范围 function ge ...