文档章节

sass环境配置与学习

赵利明
 赵利明
发布于 2015/04/05 19:27
字数 404
阅读 33
收藏 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
浦东
程序员
私信 提问
加载中

评论(0)

关于sass与VScode 一些配置 学习记录

VScode三个关于sass的插件     .vscode-Sass------sass/scss文件语法提示。(sublime text也有)     .vscode-Easy Sass------scss编译成css,min.css。(不错的一个sass编译工具)  ...

osc_fmg49rzg
2019/03/20
2
0
深度解析React以create-react-app为基础创建项目

这篇文章主要介绍了react以create-react-app为基础创建项目,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 什么是create-react-...

前端攻城小牛
2018/12/26
0
0
win10下配置webstorm自动编译SASS

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

SundayAaron
2017/01/19
0
0
sass环境搭建之node-sass,ruby

该内容全部为搬运,感谢作者的分享~,附有原文链接。 使用ruby环境 SASS学习系列之(一)--------- SASS,SCSS环境搭建(Ruby) 使用node-sass SASS学习系列之(二)--------- SASS,SCSS环境搭建(...

osc_xhmg53h3
2019/05/05
1
0
Scss 与 Sass 是什么,他们的区别在哪里?

转载自:http://yunkus.com/difference-between-scss-sass/ 要想了解Scss 与 Sass 是什么以及他们的区别又在哪里,我们不过不先从他们各自的定义说起。 Sass是什么 Sass 是一门高于 CSS 的元...

osc_b7xn6aes
2018/10/12
2
0

没有更多内容

加载失败,请刷新页面

加载更多

golangWeb框架---github.com/gin-gonic/gin学习四(模型绑定、自定义校验、ShouldBindXXX、BindXXX)

文章目录 模型绑定、校验 绑定json(ShouldBindJSON) 绑定xml(ShouldBindXML)、form(ShouldBind) 自定义校验器(demo有问题) BindQuery\ShouldBindQuery(只限查询参数) BindJson(json)、Bind(...

osc_sju4uxml
7分钟前
7
0
golangWeb框架---github.com/gin-gonic/gin学习八(监听多端口、多类型的struct模型绑定)

文章目录 监听多端口 自定义的struct绑定form-data 监听多端口 如何利用gin实现监听多端口 package main import ( "log" "net/http" "time" "github.com/gin-gonic/gin" "golang.org/x/sync/......

osc_04b0bwu2
8分钟前
8
0
golangWeb框架---github.com/gin-gonic/gin学习三(路由多视图函数、中间件、log日志)

文章目录 gin.New 路由包含多个HandlerFunc函数 使用中间件 如何写log日志 gin.New 我们之前的例子都是利用了gin.Default(),那么gin.New()跟它有什么区别?来简单看下源码 gin.Default()源码...

osc_3361hjxk
9分钟前
9
0
golangWeb框架---github.com/gin-gonic/gin学习一(路由、多级路由、参数传递几种形式)

文章目录 Gin介绍 安装 快速开始 路径参数 构造参数 post传参 get+post混合形式 构造Map格式 分组路由 Gin介绍 Gin是一个golang的微框架,封装比较优雅,API友好,源码注释比较明确,已经发布...

osc_0boqdoe2
11分钟前
5
0
golangWeb框架---github.com/gin-gonic/gin学习七(重定向、中间件Goroutines、http自定义配置)

文章目录 重定向 服务器内部重定向 中间件 中间件内部的Goroutines HTTP自定义配置 重定向 package main import ( "github.com/gin-gonic/gin" "net/http" ) func main() { router := gin.De......

osc_mgvk29y5
12分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部