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 & ...
随机推荐
- php读取excel内容
使用php读取到excel文件中的内容 1.下载PHPExcel类 2.代码: header("Content-type:text/html;charset=utf-8");req ...
- Android使用ndk-stack获取so奔溃堆栈
利用NDK做开发,因为各种原因的不小心,导致了闪退问题,没有stack的话,很难查到问题的所在.这时候ndk-stack出场了. 先看看如下DUMP信息: ********** Crash dump: ...
- Flexbox布局(转)
Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防 ...
- ceph_deploy部署ceph分布式文件系统
1.前期准备:centos6.5 minimal版本3台 选择其中一台作为一个安装节点,能无密码登录其他机器.ssh-keygen ssh-keygen -i ~/.ssh/id_rsa.pub no ...
- javascript中正则表达式的基础语法
× 目录 [1]定义 [2]特点 [3]元字符[4]转义字符[5]字符组[6]量词[7]括号[8]选择[9]断言[10]模式[11]优先级[12]局限性 前面的话 正则表达式在人们的印象中可能是一堆无 ...
- 整盘恢复黑苹果后,重新安装Win7,卡在正在启动
是这样的: GHOST整个黑苹果的镜像,然后恢复到Thinkpad e450c上,能启动,但是驱动不对,最主要是网卡驱动不了(据说) 然后重新分区,安装Win7 哦豁 卡在 正在启动windows 多 ...
- 突袭HTML5之WebGL 3D概述
WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件.WebGL同canvas 2D的API一样,都是通过脚本操纵对象,所以步骤也是基本相似:准备工作上下文 ...
- VB 中 NumericUpDown 控件 如何为手动输入设定触发事件
Private Sub numDuration_KeyUp(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) ...
- Linux_用户级_常用命令(2):cd
开篇语:懒是人类进步的源动力 本文原创,专为光荣之路公众号所有,欢迎转发,但转发请务必写出处! Linux常用命令第二集包含命令:cd 一.格式: cd directory 使用cd命令在目录层次间移 ...
- selenium测试(Java)--多窗口切换(十三)
selenium测试(Java)--多窗口切换(十三) 如果遇到点击按钮或链接后出现新窗口的情况,就需要使用窗口切换的方法. 本例中就是先打开百度搜索界面,然后利用js打开一个百度新闻界面,然后通过s ...