【完结】Sass基础知识与应用
Sass基础知识与应用
BraveWangDev
11年开发经验、全栈工程师;2023年更新计划已确定,希望能与大家共同进步;
展开
-
Sass-@for,@while,@each
本章介绍Sass-@for,@while,@each语法及使用@charset "utf-8";//@for//1-10 包含10@for $i from 1 through 10{ .item_#{$i}{ background-position: -($i - 1) * 20px 0; }}//1-10 不包含10(1-9)@for $i from 1 to 10{原创 2017-02-07 15:33:00 · 1303 阅读 · 0 评论 -
Sass-字符串插值
1,简单的字符串插值sass文件 common.scss//字符串插值$sina:'http://imgs.sina.com.cn/2017-01-01/topic/images/icon/';.content{ background:url(#{$sina}a.jpg) left top no-repeat;}sass编译后:.content { background: url(ht原创 2017-02-06 15:11:47 · 2521 阅读 · 0 评论 -
Sass的继承@extend
1,sass继承的简单实现sass文件common.scss@charset "utf-8";.fl{ float: left;}.box{ width: 300px; height: 300px; @extend .fl}sass编译后输出的.css文件.fl, .box { float: left; }.box { width: 300px; height: 30原创 2017-02-06 15:07:12 · 1898 阅读 · 0 评论 -
Sass-@if,@else if的用法
结合之前的Sass的混合-@mixin,@include,加入@if的相关语法sass文件内容 common.scss// 画三角形@mixin声明@mixin sj($fx:top,$size:100px,$color:red){ @if ($fx == top) { border-color: transparent transparent $color transparent原创 2017-02-06 15:03:09 · 5237 阅读 · 0 评论 -
Sass的混合-@mixin,@include
1,无参数,有参数和带默认值参数的@mixin声明sass文件内容://带参数,默认50@mixin opa($opa:50){ opacity: $opa / 100; filter:alpha(opacity=$opa);}//mixin需要在调用之前声明.demo{ @include opa(10);}注意: @mixin要在@include调用前声明 如果原创 2017-02-06 14:43:38 · 12610 阅读 · 0 评论 -
Sass的嵌套
前边大概说了sass的集成和使用方法,现在开始说Sass的功能1,sass的标签嵌套先写一个列表sass.html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style/common.css"原创 2017-01-25 11:35:43 · 1145 阅读 · 2 评论 -
Sass-变量和作用域
Sass作为CSS预编译工具,最常用最基础的功能就是将属性值提取为变量项目配置: 1,.scss文件放到sass文件夹下 2,.scss文件编译得到的.css文件放到style文件夹下 3,页面引入css文件路径为style下由sass编译后的.css文件 4,采用文件夹监听方式实现 见:单文件监听和文件夹监听1,Sass变量sass中的变量可以保存CSS的单位原创 2017-01-22 14:28:17 · 2271 阅读 · 0 评论 -
Sass-四种编译输出代码风格
Sass编译生成的.css文件可以通过配置命令或koala得到不同的代码输出风格1,Sass-style-4种编译模式-命令方式sass --watch style.scss:style.css --style compactsass --watch style.scss:style.css --sourcemapsass --watch style.scss:style.css --style原创 2017-01-22 14:22:02 · 979 阅读 · 0 评论 -
Sass的文件和文件夹监听
前面我们说了sass的简单实用,已经两种编译方式 频繁的修改和测试需要频繁的对sass文件进行编译 需要使用对sass文件和文件夹的监听Sass的单文件监听1,控制台进入.scss文件夹下,输入以下命令:sass --watch common.scss:a.css //对当前文件夹下common.scss监听,并自动编译生成a.css完整执行如下:Brave:~ Brave$ cd /Users原创 2017-01-22 14:15:34 · 8529 阅读 · 2 评论 -
Sass的简单使用
sass的简单使用为了查看sass效果,新建一个html页面 ,并使用sass添加背景色1,新建sass.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style/a.css"></hea原创 2017-01-22 14:04:18 · 670 阅读 · 0 评论 -
Sass的编译和单文件转换
上一节简单介绍了Sass的编译环境,做了Sass使用的前期准备 本节我们简单的使用一个Sass-我们使用的开发工具为WebStorm1,Sass文件的创建sass文件格式为.scss或.sass2,.scss和.sass的区别@charset "utf-8";// 定义变量$box:100px;//scss语法 - 需要按照严格的CSS语法区分.box{ width: $box;}//s原创 2017-01-22 13:57:56 · 814 阅读 · 0 评论 -
Sass的编译环境
Sass的编译环境1,koala-考拉(目前已停止更新) 下载地址:http://koala-app.com/index-zh.html#download2,命令方式 安装ruby(路径不能包含特殊符号,中文,空格)-已被墙 安装GEM : GEM中国-http://gems.ruby-china.org/查看ruby版本:Brave:~ Brave$ ruby -v原创 2017-01-19 11:24:24 · 667 阅读 · 0 评论