在接触到SASS这个词汇时,是在13年,大漠的w3cplus上看到的,那时我还是名UI设计师,做设计为主,偶尔工作需要也写代码的。所以对于SASS没有太多关注。

重视起想要学习LESS,SASS是在今年五月,找工作的时候发现有公司职位需求有要会的。所以呢。学习LESS,SASS就在学习计划中了。

  我很建议会CSS的人去学习一下LESS或SASS,它们二个之间有很多共通点,特别容易入门,等我看了一些视频学习了之后,有一种相见恨晚的感觉,因为很容易理解和学习。并且能真正的能提高工作效率。

LESS和SASS

主要区别是他们的实现方式不同,LESS是基于JavaScript运行,所以LESS是在客户端处理。

另一方面,Sass是基于Ruby的,是在服务器端处理的。很多开发者不选择LESS是因为LESS输出修改过的CSS到浏览器需要依赖于Javascript引擎,而Javascript引擎需要额外的时间来处理代码。关于这个有很多种方式,我选择的是只在开发环节使用LESS。一旦开发完成,我就复制粘贴LESS输出的到一个压缩器,然后到一个单独的CSS文件来替代LESS文件。另一种方式是使用LESS APP来编译和压缩你的LESS文件。两种方式都将是最小化你的样式输出,从而避免由于用户的浏览器不支持Javascript而可能引起的任何问题。尽管这不大可能,但终归是有可能的。

SASS和SCSS

SASS技术的文件的后缀名有两种形式:.sass和.scss。这两种的区别在于.sass文件对代码的排版有着非常严格的要求,而且没有大括号。

.scss的文件代码和CSS相近,用了LESS再用.scss明显的区别就是用的是$ 和@ 做变量。(建议使用.SCSS,我在看博文的时候也有看到喜欢用.SASS的,原因是:不需要{  更接近ruby python 编程风格)

最后的话

最近一直在找资料学习补充自己。做web前端,发现要学的太多了。 简单说是html5,css3,js。还涉及到很多东西,光说JS框架现在流行的就非常非常多了。

一直在想时间怎么安排比较合适呢?先学什么呢? 应该做个计划什么的,但计划还未做好。目前还是属于先是拿起什么先看看,总比坐着什么也不学的好点。

转载于:https://www.cnblogs.com/maixi/p/4613077.html

关于CSS预处理器(less,sass)相关推荐

  1. 初识css预处理器:Sass、LESS

    这篇文章是初步介绍css预处理的,详细学习请移步官网~ sass中文文档:https://www.sass.hk/docs less中文文档:http://lesscss.cn/ 什么是css预处理器 ...

  2. 009 - CSS预处理器less sass SAML SSO 单点登录 websocket socket.io

    009_css预处理器less sass saml sso 单点登录 websocket## less 安装: npm install -g less 命令: lessc style.less sty ...

  3. css 预处理器 less sass

    文章目录 1. less 1.1 less 的安装 1.2 less用法 1.2.1 命令行用法 1.2.2 变量 1.2.3 混合 1.2.4 嵌套 2. Sass 2.1 Sass简介 2.1.1 ...

  4. css预处理器:Sass LASS Stylus

    语法 Sass h1 {color: #0982C1; } h1color: #0982c1 LESS h1 {color: #0982C1; } Stylus /* style.styl */ h1 ...

  5. css预处理器sass/scss入门

    sass/scss入门 一.css预处理器是什么? 二.为什么要用css预处理器? 三.sass.less.stylus的区别? 四.sass与scss 五.sass安装 六.sass常见用法 6.1 ...

  6. Less(CSS预处理器)

    Less 基础 css弊端 CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域)等概念. CSS 需要书写大量看似没有逻辑的代码,CSS 冗余度是比较高的. 不方便维护及扩展,不利于复用. ...

  7. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  8. 您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

    2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...

  9. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  10. Sass:一种CSS预处理器语言

    http://sass-lang.com/ Sass是一种CSS预处理器语言,通过编程方式生成CSS代码.因为可编程,所以操控灵活性自由度高,方便实现一些直接编写CSS代码较困难的代码. 同时,因为S ...

最新文章

  1. linux命令:sudo浅谈
  2. C#垃圾回收学习总结
  3. Android开发实用工具汇总-持续更新
  4. 皖南医学院2020C语言试卷,安徽继续教育在线 - 皖南医学院
  5. linux——关于ip、静态网络、动态网络、网关、DNS的设置
  6. java语言语法--- Java标识符(标识符命名规则)、Java关键字、Java变量(变量的声明、赋值、使用)和常量(字符常量、字面常量)(包括Java字节码文件反汇编命令javap)
  7. jboss fuse 教程_JBoss Fuse –一些鲜为人知的技巧
  8. android package.xml,Android自动化编译设置AndroidManifest.xml中package值(包名)
  9. python魔法函数(二)之__getitem__、__len__、__iter__
  10. 王兴评华为造车:技术实力、忽悠能力都和特斯拉旗鼓相当;“微信键盘”开启内测;PDF 开发者去世|极客头条...
  11. android 4实例分析,OpenGL Shader实例分析(4)闪光效果
  12. python中if continue else,python基础;if else;for;while 分支处理.continue,break
  13. ElasticSearch搜索引擎安装配置拼音插件pinyin
  14. html登录注册页面验证代码,登录注册页面验证码问题
  15. 140个电脑小知识、小技巧(2)
  16. Win12系统或新增“灵动岛”设计 截图曝光
  17. 面向数据中心,浪潮存储双剑出鞘
  18. PHP站内搜索功能(laravel自带Scout驱动+elasticsearch)
  19. 窗帘轨道怎么安装?方法有哪些?-江南爱窗帘十大品牌
  20. 公路多孔箱涵设计_双孔8x3.3米钢筋混凝土箱涵设计套图(19张)

热门文章

  1. 7.2版本中安装的插件都是本插件未被启用???
  2. webpack安装报错(Unexpected end of JSON input while parsing near '...e6139ad7957,tarball')
  3. 七、spring生命周期之初始化和销毁方法
  4. TMS320VC5509片内ADC采集
  5. 《Java 7 并发编程指南》学习概要 (3)Semaphore, CountDownLatch, CyclicBarrier , Phaser, Exchanger...
  6. [导入]创建DataTable对象
  7. 【ES6】对象、函数、数组的扩展
  8. mysql 查询包含1或者2_Mysql:同一个表上有2个不同的查询,包含count和group by
  9. 7-40 最大的数 (10 分)
  10. 7-169 龟兔赛跑 (20 分)