如何使用sass
Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、mixin、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时。但是作为一名自己摸索的前端,初探sass就让我了解到他的强大,但是到现在我最常用的仅仅是嵌套?所以在这里我检讨一下自己,并对、梳理一下常用的sass。
我们公司用的是gulp编译sass,现在我个人习惯于用命令行编译,刚开始的时候也用过Koala编译软件,说实话,个人觉得命令行更简单方便。
一直监控编译,只要有保存更改就会立即编译 sass --watch xx.scss:xx.css
不同样式风格的输出方法
嵌套输出方式 nested sass --watch test.scss:test.css --style nested
展开输出方式 expanded sass --watch test.scss:test.css --style expanded
紧凑输出方式 compact sass --watch test.scss:test.css --style compact
压缩输出方式 compressed sass --watch test.scss:test.css --style compressed
sass --watch scss:css --style compressed --sourcemap=none 这个就是不生成soucemap文件
这里就拿在项目中用到的几个例子简单的介绍下吧
1.变量
$color:red;
p{
$color:blue;
color:$color;//blue
}
a{ color:$color;//blue }
2.嵌套规则
&-1{
left: rem-calc(45);
top: rem-calc(50);
&:after{
$size:rc(290);
width: $size;
height: $size;
background-size: $size $size;
top:rc(-30);
left: rc(10)
}
3.mixin使用(常见css3效果)
@mixin ss-pic($width,$height,$pos-left,$pos-top){
width: $width;
height: $height;
background-position: $pos-left $pos-top;
}
@mixin rounded($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
@mixin shadow($x, $y, $blur, $color) {
-webkit-box-shadow: $x $y $blur $color;
-moz-box-shadow: $x $y $blur $color;
box-shadow: $x $y $blur $color;
}
@mixin shadow-inset($x, $y, $blur, $color) {
-webkit-box-shadow: inset $x $y $blur $color;
-moz-box-shadow: inset $x $y $blur $color;
box-shadow: inset $x $y $blur $color;
}
@mixin transition($property) {
-webkit-transition: $property .2s ease;
-moz-transition: $property .2s ease;
-o-transition: $property .2s ease;
transition: $property .2s ease;
}
@mixin box-sizing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@mixin linear-gradient($from, $to) {
/* Fallback for sad browsers */
background-color: $to;
/* Mozilla Firefox */
background-image:-moz-linear-gradient($from, $to);
/* Opera */
background-image:-o-linear-gradient($from, $to);
/* WebKit (Chrome 11+) */
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to));
/* WebKit (Safari 5.1+, Chrome 10+) */
background-image: -webkit-linear-gradient($from, $to);
/* IE10 */
background-image: -ms-linear-gradient($from, $to);
/* W3C */
background-image: linear-gradient($from, $to);
}
@mixin gra($begin,$end){
zoom: 1;
background-image: -webkit-gradient(linear, left top, left bottom, from($begin), to($end));
background-image: -webkit-linear-gradient(top, $begin, $end);
background-image: -moz-linear-gradient(top, $begin, $end);
background-image: -ms-linear-gradient(top, $begin, $end);
background-image: -o-linear-gradient(top, $begin, $end);
background-image: linear-gradient(top, $begin, $end);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#{ie-hex-str($begin)}", EndColorStr="#{ie-hex-str($end)}");
}
@mixin opacityColor($color,$trans){
$rgba: rgba($color, $trans);
background: $rgba;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#{ie-hex-str($rgba)}", EndColorStr="#{ie-hex-str($rgba)}");
.ie9 &{
filter: none;
}
}
@mixin opacityImage($path){
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="#{$path}");
}
@mixin opacityGif($path){
_background-image: url("#{$path}");
}
@mixin stretchedImage($path){
background-size: 100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{$path}", sizingMethod="scale");
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{$path}", sizingMethod="scale");
}
@mixin rotate($degrees){
zoom: 1;
//-ms-filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
//filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
-moz-transform: rotate($degrees);
-o-transform: rotate($degrees);
-webkit-transform: rotate($degrees);
-ms-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin scale($x, $y){
zoom: 1;
-moz-transform: scale($x, $y);
-o-transform: scale($x, $y);
-webkit-transform: scale($x, $y);
-ms-transform: scale($x, $y);
transform: scale($x, $y);
}
@mixin flexbox(){
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}
@mixin flexboxChild($num:1){
-webkit-box-flex: $num; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: $num; /* OLD - Firefox 19- */
-webkit-flex: $num; /* Chrome */
-ms-flex: $num; /* IE 10 */
flex: $num;
width:0;
display:block; /* fix input Bug */
}
@mixin boxShadow($param){
-moz-box-shadow: $param;
-webkit-box-shadow: $param;
box-shadow: $param;
}
@mixin boxShadowParameters($xNum,$yNum,$blurNum,$color,$style...){
-webkit-box-shadow: $xNum $yNum $blurNum $color $style;
-moz-box-shadow: $xNum $yNum $blurNum $color $style;
-ms-box-shadow: $xNum $yNum $blurNum $color $style;
-o-box-shadow: $xNum $yNum $blurNum $color $style;
box-shadow: $xNum $yNum $blurNum $color $style;
}
@mixin hack($name, $value){
-moz-#{$name}: $value;
-webkit-#{$name}: $value;
#{$name}: $value;
}
@mixin horizontalCenter{
@include hack(box-align, center);
@include hack(justify-content, center);
}
@mixin verticalCenter{
@include hack(box-pack,center);
@include hack(align-items,center);
}
@mixin horizontalCenterNew{
@include hack(box-pack,center);
@include hack(justify-content, center);
}
@mixin verticalCenterNew{
@include hack(box-align, center);
@include hack(align-items,center);
}
@mixin setTransition($style,$time,$function:linear,$delay:0s){
-webkit-transition:$style $time $function $delay;
-moz-transition:$style $time $function $delay;
-o-transition:$style $time $function $delay;
transition:$style $time $function $delay;
}
a,li,input,button,section,span,div{
-webkit-tap-highlight-color: unquote('rgba(0,0,0,0)');
-moz-tap-highlight-color: unquote('rgba(0,0,0,0)');
-o-tap-highlight-color: unquote('rgba(0,0,0,0)');
-ms-tap-highlight-color: unquote('rgba(0,0,0,0)');
tap-highlight-color: unquote('rgba(0,0,0,0)');
}
.ss-pic{
$width:rc(215);
$height:rc(195);
$pos-left:rc(-242);
$pos-top:0;
@include ss-pic($width,$height,$pos-left,$pos-top);
}
4.default
$imageVersion : true !default; // 开启图片版本号
$version : 20171206 !default; // 设置总版本号 > [单独频道可独立设置$version]
$absPath : false !default; // 开启绝对路径
$bodyBgColor : #be1008 !default; // 设置body背景色
$bodyColor : #000 !default; // 设置body字体颜色
$font-family : sans-serif; // 设置文字字体
5.extend和%
%fl {
float: left;
_display: inline;
}
%fr {
float: right;
_display: inline;
}
%dis-inb {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.icon{
@extend %dis-inb;
overflow: hidden;
}
6.function函数
$img:'../../../images/activity/2018newyear';
$version:'?20171206';
/// Asset URL builder
@function asset($type, $file) {
@return url($img + $type + '/' + $file + $version);
}
/// Image asset helper
@function images($file) {
@return asset('', $file);
}
p{background: images('shenshou.png') no-repeat;}
sass是很强大的,大家不要因为习惯与css的编写方式就不去探索它,希望自己以后可以养成良好的sass编译习惯,而不是简单的拘泥于变量嵌套~
如何使用sass的更多相关文章
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- SASS教程sass超详细教程
SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...
- Sass之坑Compass编译报错
前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- Sass用法指南
写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...
- PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用
如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...
- Sass:初识Sass与Koala工具的使用
一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...
随机推荐
- Android SDK和NDK
NDK是用来给安卓手机开发软件用的,但是和SDK不同的是它用的是C语言,而SDK用的是Java语言.NDK开发的软件在安卓的环境里是直接运行的,一般只能在特定的CPU指令集的机器上运行,而且C语言可以 ...
- stack_2.由两个栈组成队列
思路: 用两个栈($stack_a, $stack_b),当push的时候,压入$stack_a, 让pop的时候,先把$stack_a元素依次全部倒入$stack_b中,再对$stack_b进行po ...
- java中interface 的特性
有时必须从几个类中派生出一个子类,继承它们所有的属性和方法.但是,Java不支持多重继承.有了接口,就可以得到多重继承的效果. 接口(interface)是抽象方法和常量值的定义的集合.从本质上讲,接 ...
- 1111 Online Map (30)(30 分)
Input our current position and a destination, an online map can recommend several paths. Now your jo ...
- MySQL-with rollup函数运用 _20160930
在博客里http://www.cnblogs.com/Mr-Cxy/p/5898839.html提到了行转列, 如果想在下面这个表下面添加一行 总计 数据行SQL代码怎么实现 并且根据9月金额进行城市 ...
- C# 对象间的 深拷贝 实现
以下的这个类实现了 2个含有部分字段名字相同 的对象的 赋值拷贝. public class ShallowCopyHelper { public static voi ...
- vijos:P1190繁忙的都市
描述 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉路口之间最多有一条道路 ...
- POJ1502(最短路入门题)
MPI Maelstrom Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7471 Accepted: 4550 Des ...
- 【转】Pro Android学习笔记(二):开发环境:基础概念、连接真实设备、生命周期
在Android学习笔记(二):安装环境中已经有相应的内容.看看何为新.这是在source网站上的Android架构图,和标准图没有区别,只是这张图颜色好看多了,录之.本笔记主要讲述Android开发 ...
- ng2父子模块数据交互
一.父模块向子模块传值 //父html <my-child [childdata]="parentdata"></my-child> 其中,my-child ...