sass/scss样式预处理器及手机端适配整合（无插件版本）

 

目录

1、安装sass

2、sass命令自动编译css

3、简易工程目录（无框架）

4、sass使用

---

1、安装sass

1.先安装node   检查 node -v 版本

2.安装sass  命令：npm install -g sass   检查 sass -version 版本

2、sass命令自动编译css

1.scss文件自动生成.css 文件输出

根目录：sass --watch index.scss index.css

2.scss文件夹路径作为输入和输出（css的scss文件编译到stylecss文件夹）

根目录：sass --watch css:stylecss

3、简易工程目录（无框架）

4、sass使用

1.index.scss（文件主要记录了scss变量、嵌套、混合、继承）用法

@import 'base';//引入公共scss
// @use 'base';
@charset 'UTF-8';
$color:#ffffff;
$red:#f00;
// 变量 
body{
	width: 100%;
	background-color: $color;
	height: 100%;
	margin: 0;
	padding: 0;
	// 嵌套  常用
	.box{
		font-size:px2rem(75px);
		color:$red ;
		padding-top: 150px;
		padding-left: 100px;
	}
}
// 混合minxi
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box{
	@include transform(rotate(60deg));
}
//继承（ 正常  错误  警告 ）
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}
.error {
  @extend %message-shared;
  border-color: red;
}
.warning{
	@extend %message-shared;
	border-color: yellow;
}

2.base.scss 公共样式 （含rem/vm）适配

@charset 'UTF-8';
$color:#ffffff;
@function px2rem($px){ //rem适配
	@return $px / 75px*1rem;
	// @return $px / 7.5px*1vw;
}
// @function vw($px) {  vw适配
//     @return ($px / 750) * 100vw;
// }
html{
	width: 100%;
	background-color: $color;
	height: 100%;
	
}

编译后index.css 效果

html {
  width: 100%;
  background-color: #ffffff;
  height: 100%;
}

body {
  width: 100%;
  background-color: #ffffff;
  height: 100%;
  margin: 0;
  padding: 0;
}
body .box {
  font-size: 1rem;
  color: #f00;
  padding-top: 150px;
  padding-left: 100px;
}

.box {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.warning, .error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

/*# sourceMappingURL=index.css.map */