发表于： 2018-05-13 22:10:53
2 567
今天完成的事情：
完成任务11，提交代码
明天计划的事情：
开始任务12
遇到的问题：
chrome不能运行less.js
less相关教程写到less文件可以在浏览器直接运行，只需要在head添加下面代码，但是运行错误
<link rel="stylesheet/less" type="text/css" href="index.less">
<script src="less.js" type="text/javascript"></script>
这个是跨域错误，file协议找不到less文件
解决方法：
1把文件部署在服务器上，用http访问
2 使用编译后的css文件
收获：
这次任务使用less完成，用到变量、mixin、嵌套，感觉变量、mixin复用很好用，嵌套就像html结构一样层次清晰，至于函数还没有用到。
less很有必要在服务器端使用，把编译工作都交给服务器管理，加快运行速度，减少出错的可能。
任务11
开始时间：5.11
预计结束时间：5.14
http://task.jnshu.com/zentao/project-task-629.html
任务11深度思考
1.如何使用less?
在客户端使用
引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
在<head> 中引入:
<script src="less.js" type="text/javascript"></script>
less样式文件一定要在引入less.js前先引入。 备注：请在服务器环境下使用！本地直接打开可能会报错！
服务器端
LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。
使用编译生成的静态 CSS 文件
通过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 文章中引入使用。这里要强调的一点，LESS 是完全兼容 CSS 语法的，也就是说，我们可以将标准的 CSS 文件直接改成 .less 格式，LESS 编译器可以完全识别。
2.如何使用sass?
创建运行Sass的环境
要想在项目中正常使用Sass，先保证你的电脑上能运行Sass的环境。这也是Sass受限，也是不被大家爱戴的原因之一。很多人讨论使用Sass，需要先安装Ruby环境。对于不喜欢命令编译的同学，还需要安装GUI编译器。
创建公用的Sass项目模板
在做项目时，不管什么项目总是有一些可以共用的部分，比如说重置样式、公用样式、模块组件、UI库等。那么在Sass项目中也是如此。为了避免在每个项目中做一些相同的事情，那么可以在电脑上创建一个公用的Sass项目模板。
在这样的一个模板中，每个Sass目录下的文件夹都对应着各种分类的_xxx.scss文件：
base：放置一些基本样式的SCSS文件，比如重置样式_normalize.scss，基本样式_base.scss，文本排版样式_typography.scss等
components：放置一些公用组件，比如：按钮_buttons.scss、表单_form.scss、表格_tables.scss、选项卡_tabs.scss等
helps：放置一些辅助功能性文件，比如：_css3.scss、_variables.scss、_mixins.scss、_helpers.scss和_function.scss等
layout：放置一些跟页面布局相关的，比如：_layout.scss、_header.scss、_footer.scss、_sidbar.scss等pages:放置跟具体项目页面相关的样式文件。
themes：对于一些有前后台页面，或者需换肤的项目，就可以将相关文件放置在这里。
vendors：引用的外部插件或者框架的SCSS文件，比如_bootstrap.scss、_foundation.scss。
style.scss这是主样式文件，最终编译，就编译这个问题。当然根据项目大小，可做一些其他处理。比如说针对不同的页面,创建不同的page_xxx.scss文件。
组织Sass项目
其实就是将公用的这个当作是一个Sass项目，只不过这个Sass项目是用来做备用的，可以无限制的复用。那么在创建这样的一个项目时，就需要合理的组织，便于后期的使用。
Sass项目的编译与调试
在具体编写Sass的时候，还需要掌握Sass的编译和调试。众所周知，在项目中具体引用的是.css文件而不是.scss或者.sass文件。所以你要将写好的Sass编译成需要的CSS。对于如何编译？其实方法很多种，你要是喜欢使用命令，你可以直接在命令终端编译，如果你不喜欢命令编译，你还可以使用GUI这样的界面工具辅助编译。
sass的基本使用方法：
A）基本用法：
- 变量
语法：$变量名 ： 变量值 ;
用途：在sass中，可以定义一些项目中常用的样式变量，如font-size，color，background-color等；
- 计算功能
在项目中，如果用到sass，定义变量时都会定义一些常用的值作为sass的变量，但如果在写样式时如font-size的值在常用变量中没有定义，那么可以利用sass变量的计算能力（加减乘除）
- 嵌套
定义：若几个节点存在存在亲属关系，则在sass上可以用嵌套的方式来代替原css中的后代选择器；如果在嵌套中想调用父元素，则可以用&代替；
B）复用：
- 继承
定义：在sass中允许一个选择器继承另一个选择器的全部样式；
语法： 选择器 { @extend 另一个选择器 }
- mixin
定义：在sass中，可以利用@mixin来定义一个复用块，而且该复用块还能引入参数和参数的默认值。
语法：
定义复用块 @mixin name （param1：default1 ，param2：default2，...）{ } 引用复用块 选择器{@include name (val1,val2,...) }C）高级用法：
条件用法
定义：sass中可以像js一样采用条件判断语句选择性采用合适的样式块；
语法：
@if （confident） { 样式块1 }
@else { 样式块2 }循环用法
定义：sass中不仅仅可以用条件语句，还可以调用循环语句；sass中的循环语句有@for 和@while，用法基本一致。
语法： @for $i from start to end { 样式 } ，@while confident { 样式 }
注意：@for 是从start到end但不包含end；
3.less和sass有什么区别？
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
Sass与Scss是什么关系? Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。
Less和Sass在语法上有些共性，比如下面这些：
1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
Less和Sass的主要不同就是他们的实现方式。Less是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的。
Sass/Scss与Less区别
1.编译环境不一样
Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。
2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。
3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
输出样式的风格可以有四种选择，默认为nested
nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码
4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
5. 引用外部CSS文件
scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.
6.Sass和Less的工具库不同
Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。
4.如何使用gulp编辑less？
gulp是自动化构建工具,构建工具可以使繁琐的工作简单化，提高开发人员的工作效率，对于前端开发开发人员来说，我们通常用gulp来合并文件，压缩文件，编译less和sass文件等。
具体操作：
1.安装nodejs
gulp 是基于 node 实现的，那么我们就需要先安装 node。在windows平台可以直接到https://nodejs.org/en/下载客户端，安装nodejs就像其他windows平台软件安装一样简单。使用nodejs需要依赖命令行，安装好后在命令行执行 node -v 可以查看版本号，若看到版本号说明安装成功。
2.全局安装gulp
gulp的安装需要依赖npm包管理工具，用该工具能解决NodeJS代码部署上的很多问题，目前该管理工具和nodejs是一起打包安装的不需要另外安装。在安装好nodejs后在命令行执行 npm -v 可以查看版本号，若看到版本号说明安装成功。
接下来通过命令行执行 npm install gulp -g 全局安装gulp，安装过程视情况可能会很慢甚至不能成功。
安装成功后在命令行执行 gulp -v 可以查看版本号，若看到版本号说明安装成功。
3.在项目目录中创建package.json
创建package.json文件有两种方式
方式1：不通过命令行在项目目录中直接创建该文件。文件内容类似如下。
{
"name": "gulp2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
"author": "",
"license": "ISC",
"devDependencies": { "gulp-less": "^3.3.0"//安装less插件依赖该文件，此处配置安装那个版本的gulp-less }
}
方式2：通过命令行方式创建该文件
在命令行中通过cd命令切换到项目目录，在windows平台下，例如你的项目目录在c:/test/web1,可以在命令行执行 c：让当前目录切换到c盘，然后执行 cd /test/web1 即可切换到要执行任务的项目目录，接着在命令行执行 npm init ，提示你配置package.json文件。
如果不做任何输入，每个字段都通过enter键忽略掉会得到一个默认的配置文件，至此package.json文件配置成功，项目文件中新建了一个package.json。
4.在项目中安装gulp
在项目目录下，在命令行执行 npm install gulp –save-dev 命令，会在项目中安装gulp。
5.在项目中安装gulp-less插件
在项目目录下，在命令行执行 npm install gulp-less –save-dev 命令，会在项目中安装gulp-less插件。
安装完成会看到很长一段下图的内容，下图是其中的一部分，说明安装成功了。
6.通过gulp和插件gulp-less执行编译less文件的任务
在项目目录中创建你需要编译的less文件（例如项目目录中css/index.less文件）。 通过gulp执行任务之前需要配置执行任务的文件，在项目目录中创建gulpfile.js文件，文件内容如下，gulp通过该配置执行任务。
var gulp = require('gulp'), //本地安装gulp所用到的地方
less = require('gulp-less');//本地安装gulp-less所用到的地方
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
gulp.src('css/index.less') //该任务针对的文件，你需要编译的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('css/index')); //将会在css下生成index.css
});
gulp.task('default',['testLess']); //定义默认任务，通过命令行执行gulp命令若没提供任务名就按此处定义的任务来执行，可以是一次执行多个任务。
最后在项目目录下通过命令行执行 gulp 就会执行编译less文件的任务了（也可以执行gulp 任务名）。至此整个任务就算成功了。
备注：
除了可以用npm之外，还可以使用cnpm来执行以上用到npm的命令，使用cnpm会快一点，这是淘宝提供的镜像，服务器在国内，npm在国外，使用cnpm需要先安装cnpm，可以执行在命令行执行 npm install cnpm -g –registry=https://registry.npm.taobao.org 命令，安装完后最好查看其版本号cnpm -v，后面执行看到的提示信息和npm不一样，当操作步骤几乎是一样的。
返回列表
评论