文档章节

sass环境配置与学习

赵利明
 赵利明
发布于 2015/04/05 19:27
字数 404
阅读 24
收藏 0

sass环境配置(link)

1.安装ruby http://rubyinstaller.org/downloads

2.安装sass

gem install sass

*.修改gem的source

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

*.升级sass

gem update sass

*.查看sass版本

sass -v

*.sass命令行编译(link

sass style.scss style.css

sass学习

// 引用
@import "_reset";
/* 这种注释会在css里显示  */
//普通变量
$baseBgColor: #cc3333;
//默认变量
$baseColor: #fff !default;
$baseFontFamily: "Microsoft Yahei", "Hiragino Sans GB", sans-serif;
$baseFontSize: 14px;
// 运算
$baseFontSize1: $baseFontSize + 2px;
$baseLineHeight: 1.5;
//一维数组list
$px1: 6px 10px;
//二维数组list
$color1: (
	(red, blue), 
	(blue, red)
);
//map
$heading: (
	h1: 2em,
	h2: 1.5em,
	h3: 1.2em
);
p {	
    background: $baseBgColor;
    color: $baseColor;
    font-size: $baseFontSize;
}
.t1 {
	font: #{$baseFontSize}/#{$baseLineHeight} #{$baseFontFamily};
	padding: $px1;
	margin: nth($px1, 1) nth($px1, 2);
	//属性嵌套(Nesting)
	border: {
    	style: solid;
    	left: {
      		width: 2px;
      		color: $baseBgColor;
    	}
  	}
  	//选择器嵌套(Nesting)
	& > a {		
		color: nth(nth($color1, 2), 2);
		&:hover{		
			color: red;
		}
	}
	//@at-root跳出所有上级选择器
	@at-root {
		span {
			color: $baseBgColor;
			font-weight: bold;
		}
	}
}
//混合(mixin)
@mixin styl_1($opacity: 50, $fontSize: 16px, $color: red) {
	opacity: $opacity / 100;
  	filter: alpha(opacity=$opacity);
  	font-size: $fontSize;
  	color: $color;  	
}
@mixin styl_2($fontSize: 16px, $shadow...) {	
  	font-size: $fontSize;  	
  	-webkit-box-shadow:$shadow;
  	box-shadow:$shadow;
}
.t1 > .s1 {
	@include styl_1(80, $color:blue);
	@include styl_2(18px, 0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//继承
%add1 {
	p {
		font-size: 20px;
	}
}
.t2 {
	@extend .t1;
	p {
		color: #000;
		font-weight: bold;
	}
	@extend %add1;
}
//函数
@function pxToRem($px) {
	@return $px / 12px * 1rem;
}
.t2 {
	font-size: pxToRem(16px);
	p {
		color: lighten(#000,40%);			// 减淡
		background: darken(#cc3333, 20%);	// 加深	
	}
}
//@if判断
$theme: green;
.t2 > p {
	@if $theme == blue {
		color: blue;
	} @else if $theme == red {
		color: red;
	} @else {
		color: $theme;
	}
}
//三目判断
.t2 > p {
	background: if(false, red, blue);
}
//for循环
@for $i from 1 through length($px1) {
	.item1-#{$i} { 
		font-size: nth($px1, $i);
	}
}
//多个字段map数据循环
@each $index, $val in $heading {
	#{$index} {
		font-size: $val;
	}
}
//多个字段list数据循环
@each $a, $b in $color1 {
	.item2-#{$a} {
		color: $b;
	}
}

© 著作权归作者所有

共有 人打赏支持
赵利明
粉丝 5
博文 6
码字总数 1866
作品 0
浦东
程序员
win10下配置webstorm自动编译SASS

最近刚接触SASS,语法规则还没学习,就先研究下环境的配置吧。 webstorm是一款很强大的编译器,一直在使用。 1、安装ruby 下载安装包: CSDN免积分下载rubyinstaller-2.3.3-x64 下载后双击安...

SundayAaron
2017/01/19
0
0
SASS环境搭建及HBuilder中sass预编译配置

---------------------------------Ruby环境安装-------------------------------- 至于为什么要安装ruby环境请移步:https://www.zhihu.com/question/33811497   1.先下载一个ruby的安装文......

鋒o丫头
2017/07/07
0
0
[FungLeo原创]CSS预编译技术之SASS学习经验小结

[FungLeo原创]CSS预编译技术之SASS学习经验小结 前言 接触CSS是05年.使用xhtml+css开发是06年.但真正全面采用xhtml+css开发却是08年开始的.因为居于三线城市,比一线程序的前驱者还是晚了一些...

FungLeo
2016/03/11
0
0
从搭建vue-脚手架到掌握webpack配置(一.基础配置)

前言 学习vue的过程肯定会接触到vue的单文件组件,进而接触到vue-cli(vue工程构建的脚手架工具),但是vue-cli创建的工程对初学者很不友好,创建的项目又太过简单和片面。 本教程会分几篇文章...

JasonWild
01/08
0
0
Win环境下让Sass支持中文注释

1.找到sass目录,修改engine.rb的配置 sass目录位置,在安装sass前世要有ruby环境,因此sass目录是ruby的子目录,以下是我的win环境下的sass目录: C:Ruby23-x64librubygems2.3.0gemssass-3...

issac宝华
2016/09/20
28
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

最全最强解析:支付宝钱包系统架构内部剖析(架构图)

支付宝系统架构概况 典型处理默认 资金处理平台 财务会计 支付清算 核算中心 交易 柔性事务 支付宝的开源分布式消息中间件–Metamorphosis(MetaQ) Metamorphosis (MetaQ) 是一个高性能、高可...

晨猫
29分钟前
4
0
竞品分析

那什么样的场景需要用关键纬度分析法分析竞品呢? 竞品分析的目的是为了看竞品们和自己产品重合的业务都具备哪些功能点,以及这些功能是怎么做的,以此确定自己产品的优化方向。 竞品们的业务...

于谦老师
36分钟前
1
0
OSChina 周三乱弹 —— 公司女同事约我

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享水木年华的单曲《蝴蝶花(2002年大提琴版)》 《蝴蝶花(2002年大提琴版)》- 水木年华 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
1K
16
Linux环境搭建 | VMware下共享文件夹的实现

在进行程序开发的过程中,我们经常要在主机与虚拟机之间传递文件,比如说,源代码位于虚拟机,而在主机下阅读或修改源代码,这里就需要使用到 「共享文件」 这个机制了。本文介绍了两种共享文...

良许Linux
今天
9
0
JUC锁框架——AQS源码分析

JUC锁介绍 Java的并发框架JUC(java.util.concurrent)中锁是最重要的一个工具。因为锁,才能实现正确的并发访问。而AbstractQueuedSynchronizer(AQS)是一个用来构建锁和同步器的框架,使用A...

长头发-dawn
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部