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编译的更多相关文章

  1. CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

    sass.less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...

  2. scss 编译方法

    第一种: 手动创建 scss文件夹  用Node.js command promt  进入项目目录  在项目目录下面 输入  sass scss/main.scss css/main.css    s ...

  3. webpack实现scss编译配置

    1.webpack.start.js: var webpack = require('webpack'); var SpritesmithPlugin = require('webpack-sprit ...

  4. 安装Ruby、Sass在WebStrom配置Scss编译环境css自动压缩

    安装Sass和Compass sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先 ...

  5. koala编译scss文件时不支持中文字体的解决方案

    第一种方案:在scss文件第一行加上这行代码@charset "utf-8"; 第二种方案: scss文件编译时候使用ruby环境,出现 Syntax error: Invalid ...

  6. webstorm编译less和scss

    Webstorm 配置less编译的Arguments参数: $FileName$ $FileParentDir$\ccy\ccy1\ccy2\$FileNameWithoutExtension$.c ...

  7. 让webStorm支持自动监听编译scss文件

    前提概要 今日,重装了两波系统,,,之前安装的各种环境都忘光了,重新又踩一次坑的感觉很不舒服,所以记录一下配置自动编译scss一路遇到的坑 一.webstrom run的时候控制台输出的错误中文提示乱 ...

  8. sass/scss 和 less的区别

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

  9. [Sass]命令编译

    [Sass]命令编译 命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass.这种编译方式是最直接也是最简单的一种方式.因为只需要在你的命令终端输入: 单文件编译: sass & ...

随机推荐

  1. Media Queries使用方法

    1. 最大宽度max-width “max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效.如: @media screen and (max-width ...

  2. ajaxfileupload 传参数

    引用:http://www.cnblogs.com/lyeo/archive/2012/05/11/2496261.html 直接上代码: var data = { name: 'my name', ...

  3. FRM-40400:事务完成:已应用和保存X条记录"消息框不显示处理方法

    oldmesl := :system.message_level; :system.message_level :;--不显示长度超过25的信息 do_key('COMMIT_FORM'); :sys ...

  4. css2 [lang|=en] 误区

    [lang|=en] w3c说明:css2选择器,选择以en开头的的lang属性. w3c的这个解释是有误区的,en开头,但是en后面必须要有-,也就是说是选择的是en-开头

  5. url编码

    url编码 情况1:网址路径中包含汉字 打开IE,输入网址”http://zh.wikipedia.org/wiki/春节”.注意,”春节”这两个字此时是网址路径的一部分. 查看HTTP请求的头信息, ...

  6. 查询和删除表中重复数据sql语句

      1.查询表中重复数据.select * from peoplewhere peopleId in (select   peopleId   from   people   group   by   ...

  7. python常用小模块使用汇总

    在写代码过程中常用到一些好用的小模块,现整理汇总一下: 1.获取当前的文件名和目录名,并添到系统环境变量中. file = os.path.abspath(__file__)             ...

  8. 大规模web 服务开发技术

    <大规模web 服务开发技术> 是一本讲解大型Web 应用的入门级书籍,能够让我们接触到大应用的知识点. 目录如下: 第1章  大规模Web服务的开发定位——掌握整体第2章  大规模数据处 ...

  9. PHP动态图像的创建要如何实现呢?

    with-gd=[/path/to/gd] --with-jpeg-dir=[/path/to/jpeg-6b] --with-t1lib=[/path/to/t1lib]  完成添加后执行make命 ...

  10. JS的兼容函数

    获取类名的兼容函数 //obj.getElementsByClassName 只能在现代浏览器中使用,不能在IE8以下使用 //两个参数 classname 类名 obj 范围 function ge ...