less与SASS学习心得

在以往学习CSS和HTML的过程中其实还是比较简单的。因为HTML和css基本上没有逻辑推理，做一步显一步，所以做出来思路非常清晰。但是局限性也非常的大，那就是CSS本身是不具备变量计算判断循环这些功能的。而在实际编码过程中我们又需要简化工程量而不可避免的使用到这些功能。所以less和SASS便孕育而生。less和SASS是对现有的CSS的扩展。这两种都使css拥有了上述中没有的功能。CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

个人认为less的书写更为简化，而SASS的功能更为强大。在后来的自学中，我上网查询到SASS明显多出来的功能有以下几点

//if条件句：

p {

　　　　@if 1 + 1 == 2 { border: 1px solid; }

　　　　@if 5 < 3 { border: 2px dotted; }

　　}

//if...else条件句：

@if lightness($color) > 30% {

　　　　background-color: #000;

　　} @else {

　　　　background-color: #fff;

　　}

//循环语句：

//for循环：

@for $i from 1 to 10 {

　　　　.border-#{$i} {

　　　　　　border: #{$i}px solid blue;

　　　　}

//while循环：

　$i: 6;

　　@while $i > 0 {

　　　　.item-#{$i} { width: 2em * $i; }

　　　　$i: $i - 2;

　　}

//each循环，类似于for循环：

@each $member in a, b, c, d {

　　　　.#{$member} {

　　　　　　background-image: url("/image/#{$member}.jpg");

　　　　}

//自定义函数：

@function double($n) {

　　　　@return $n * 2;

　　}

　　#sidebar {

　　　　width: double(5px);

　　}

这些功能也能在SASS 的官方手册上找到，总之学些LESS和SASS任重而道远，现在为止还非常不熟悉这两种写法。希望能够在以后的代码编写中熟能生巧。

转载于:https://www.cnblogs.com/Andylasy/p/4660178.html

less与SASS学习心得相关推荐

Java EE学习心得
–Java EE学习心得 1. 称为编程专家的秘诀是: 思考-----编程--------思考------编程--.. 编程不能一步到位,不能一上来就编,必须先思考如何写,怎样写?然后再编程 ...
Assembly学习心得
http://blog.csdn.net/etmonitor/ Assembly学习心得说明: 最近开始准备把学到的.NET知识重新整理一遍,眼过千遍不如手过一遍,所以我准备记下我的学习心得,已备参 ...
对于mysql存储过程感想_存储过程学习心得
存储过程学习心得 (2014-12-28 17:28:06) 标签: it 我使用过几次SQL Server,但所有与数据库的交互都是通过应用程序的编码来实现的.我不知到在哪里使用存储过程,也不了解实 ...
好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
大学计算机课英语心得体会,关于计算机网络辅助大学英语教学的思考学习心得...
关于计算机网络辅助大学英语教学的思考学习心得［摘要］计算机网络辅助教学可以增强学生的学习兴趣,提高他们自觉学习的能力,因而得到了大多数学生的认可,取得了比较显著的成效.计算机网络辅助教学也对大学英语 ...
我的MYSQL学习心得（十六）优化
原文:我的MYSQL学习心得(十六) 优化我的MYSQL学习心得(十六) 优化我的MYSQL学习心得(一) 简单语法我的MYSQL学习心得(二) 数据类型宽度我的MYSQL学习心得(三) 查看 ...
Spring Framework------version4.3.5-----Reference学习心得-----总结
1.Spring Framework概述: 有很多可用版本,网址http://projects.spring.io/spring-framework/ 2.Spring Framework ...
计算机基础与应用(上)笔记总结,计算机基础学习心得体会范文（通用3篇）
计算机基础学习心得体会范文(通用3篇) 当我们对人生或者事物有了新的思考时,好好地写一份心得体会,这样可以记录我们的思想活动.那么要如何写呢?以下是小编精心整理的计算机基础学习心得体会范文(通用3篇) ...
*：学习心得——C语言----S1T62班王作舟
*:学习心得--C语言----S1T62班王作舟来源:[url]http://www.accp-teem.com.cn/ArticleView/2007-7-14/Article_View_118 ...

less与SASS学习心得

less与SASS学习心得相关推荐

最新文章

热门文章