发表于： 2018-10-27 21:03:18
1 670
今天完成的事情：
完成了任务十一
.import{
background-color: $three;
display: flex;
margin-bottom: ($five / 8);;
margin-top: ($five / 4);
.phone{
margin-left: ($five / 4);
margin-right: ($five / 4);
padding-top: ($five / 6);
}
}
input{
height: ($five * 1.25);
width: 85%;
border: none;
outline: none;
}
.import-box{
background-color: $three;
display: flex;
margin-bottom: ($five / 8);;
margin-top: ($five / 4);
.phone{
margin-left: ($five / 4);
margin-right: ($five / 4);
padding-top: ($five / 6);
}
}明天计划的事情：明天计划完成任务十二
遇到的问题：今天都挺好的因为对sass比较熟悉了，变量啊，嵌套啊，还加入了一些四则运算。
收获：对saas的理解加深了，sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。1、普通变量：定义之后可以在全局范围内使用。2、默认变量：Sass的默认变量仅需要在值后面加上!default即可。3、特殊变量：一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。4、多值变量：多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。5、全局变量：在变量值后面加上!global即为全局变量。这个目前还用不上，不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病，所以才有了这个全局变量。
任务十一总结
今天这个任务总体来说很简单没有难度，就是用sass重写一下原来的任务四，就是刚开始接触sass的时候有点懵逼，资料反反复复看了好几遍，一直看不太明白不理解怎么运用，后面请教了师兄，师兄很细心的给我讲解了一遍，才明白变量、嵌套、四则运算这些。
深度思考
1、如何使用less?
css的预处理语言，可以有变量，函数等特性。比纯css的方式更方便快捷。需要编译软件，可以用考拉。创建less后缀文件，拖进考拉。步骤： 1.创建一个less后缀文件，声明文档头@charset”utf-8”; 2.less文件（或文件夹）拖入考拉中 3.右键设置输出路径，跟less文件可以同一个文件下，同名最好。我们可以直接在客户端使用 .less（LESS 源文件），只需要从 http://lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码,也可以直接引入cdn. 首先引入less代码。Less在CSS语法的基础上进行了扩展，主要包含： 变量、嵌套、混合、操作符、函数等等.
2.如何使用sass?
SASS提供四个编译风格的选项：nested：嵌套缩进的css代码，它是默认值。expanded：没有缩进的、扩展的css代码。compact：简洁格式的css代码。compressed：压缩后的css代码。以及变量、嵌套、运算，还有就是选择器太多会影响我们的选择权重，而且后期不易维护。建议只嵌套三个。运算除法的时候要注意的，只能一个带单位，还有就是加上（）不然编译会错误。
3.less和sass有什么区别？
1，Sass诞生是最早也是最成熟的CSS预处理器，有Ruby社区和Compass支持；Stylus早期服务于Node JS项目，在该社区得到一定支持者；LESS出现于2009年，支持者远超于Ruby和Node JS社区；
2，sass和stylus扩展性更强，sass广泛使用于国外，less在国内受众最多。stylus是后起之秀。
3，Sass和LESS语法较为严谨、严密，而Stylus语法相对散漫，其中LESS学习起来更快一些，因为他更像CSS的标准；
4，sass和LESS相互影响较大，其中Sass受LESS影响，已经进化到了全面兼容CSS的SCSS；
5，Sass和LESS都有第三方工具提供转译，特别是Sass和Compass是绝配。
4.如何使用gulp编辑less？
使用gulp-less插件将less文件编译成CSS。
1、安装gulp-less
在命令行里使用npm install gulp-less --save-dev ;
2、配置gulpFile.js
2.1基本使用
1 2 3 4 5 6 7 8 | var gulp = require('gulp'), //获取gulp模块 less = require('gulp-less'); //获取gulp-less插件 gulp.task('testLess', function () { //创建gulp任务 gulp.src('src/less/index.less') //获取less文件路径 .pipe(less()) //执行less .pipe(gulp.dest('src/css')); //输出CSS文件路径 }); |
2.2编译多个less文件
1 2 3 4 5 6 7 8 | var gulp = require('gulp'), //获取gulp模块 less = require('gulp-less'); //获取gulp-less插件 gulp.task('testLess', function () { //创建gulp任务 gulp.src(['src/less/index.less','src/less/detail.less']) //获取多个less文件路径 .pipe(less()) //执行less .pipe(gulp.dest('src/css')); //输出CSS文件路径 }); |
2.3匹配符使用
1 2 3 4 5 6 7 8 | var gulp = require('gulp'), //获取gulp模块 less = require('gulp-less'); //获取gulp-less插件 gulp.task('testLess', function () { //创建gulp任务 gulp.src('src/less/*.less']) //获取所有less文件路径 .pipe(less()) //执行less .pipe(gulp.dest('src/css')); //输出CSS文件路径 }); |
3.3多模块使用先编译再压缩
1 2 3 4 5 6 7 8 9 10 | var gulp = require('gulp'), less = require('gulp-less'), //确保本地已安装gulp-minify-css [cnpm install gulp-minify-css --save-dev] cssmin = require('gulp-minify-css'); gulp.task('testLess', function () { gulp.src('src/less/index.less') .pipe(less()) //执行编译 .pipe(cssmin()) //对编译后的CSS进行压缩<br> .pipe(gulp.dest('src/css')); }); |
任务耗时两天
返回列表
评论