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. php读取excel内容

    使用php读取到excel文件中的内容 1.下载PHPExcel类 2.代码: header("Content-type:text/html;charset=utf-8");req ...

  2. Android使用ndk-stack获取so奔溃堆栈

    利用NDK做开发,因为各种原因的不小心,导致了闪退问题,没有stack的话,很难查到问题的所在.这时候ndk-stack出场了. 先看看如下DUMP信息: ********** Crash dump: ...

  3. Flexbox布局(转)

    Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防 ...

  4. ceph_deploy部署ceph分布式文件系统

    1.前期准备:centos6.5 minimal版本3台 选择其中一台作为一个安装节点,能无密码登录其他机器.ssh-keygen ssh-keygen -i ~/.ssh/id_rsa.pub no ...

  5. javascript中正则表达式的基础语法

    × 目录 [1]定义 [2]特点 [3]元字符[4]转义字符[5]字符组[6]量词[7]括号[8]选择[9]断言[10]模式[11]优先级[12]局限性 前面的话 正则表达式在人们的印象中可能是一堆无 ...

  6. 整盘恢复黑苹果后,重新安装Win7,卡在正在启动

    是这样的: GHOST整个黑苹果的镜像,然后恢复到Thinkpad e450c上,能启动,但是驱动不对,最主要是网卡驱动不了(据说) 然后重新分区,安装Win7 哦豁 卡在 正在启动windows 多 ...

  7. 突袭HTML5之WebGL 3D概述

    WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件.WebGL同canvas 2D的API一样,都是通过脚本操纵对象,所以步骤也是基本相似:准备工作上下文 ...

  8. VB 中 NumericUpDown 控件 如何为手动输入设定触发事件

    Private Sub numDuration_KeyUp(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) ...

  9. Linux_用户级_常用命令(2):cd

    开篇语:懒是人类进步的源动力 本文原创,专为光荣之路公众号所有,欢迎转发,但转发请务必写出处! Linux常用命令第二集包含命令:cd 一.格式: cd directory 使用cd命令在目录层次间移 ...

  10. selenium测试(Java)--多窗口切换(十三)

    selenium测试(Java)--多窗口切换(十三) 如果遇到点击按钮或链接后出现新窗口的情况,就需要使用窗口切换的方法. 本例中就是先打开百度搜索界面,然后利用js打开一个百度新闻界面,然后通过s ...