logo

您所在位置网站首页 > 海量文档  > 计算机 > WEB编程

sass学习总结笔记(包含安装和语法).pdf 14页

版权归作者和本站网站所有,维权必究

  • 支付并下载
  • 收藏该文档
  • 百度一下本文档
  • 修改文档简介
全屏预览

下载提示

1.本站不保证该用户上传的文档完整性,不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值,立即自动返金币,充值渠道很便利

文档说明

我要付费阅读此文档为付费文档,你可以预览5页,更多阅读请点击 “我要付费阅读”!
下载地址
需要金币:50    文档纠错   收藏文档   下载帮助
支付并下载
特别说明: 有些用户上传的内容不全,请特别注意,预览的内容=实际下载的内容。
  • 上传用户 tina0229(上传创作收益人)
  • 上传时间:2017-10-12
  • 需要金币50(10金币=人民币1元)
  • 浏览人气
  • 下载次数
  • 收藏次数
  • 文件大小:160.7 KB
下载过该文档的会员
本人在实际中总结的学习sass经验,包含安装和常用的语法!
作者姓名:**婷
个人介绍:网页制作及前端技术
你可能关注的文档:
sass学习总结笔记 (包含安装和语法 ) 一.安装SASS 1.安装ruby 因为sass是用ruby语言写的,所以需要安装ruby环境 打开安装包去安装ruby,记住要勾选 下 选项来配置环境路径 Add Ruby executables to your PATH 安装完成之后继续下一步操作 2.安装sass 在cmd里通过gem安装sass gem是ruby的包管理工具,类似于nodejs 的npm gem install sass 这个时候如果不翻墙的话是会出问题的,因为: 由于国内网络原因 (你懂的),导致 存放在 Amazon S3 上 的资源文件间歇性连接失败。这时候我们可 以通过gem sources命令来配置源,先移除默认的https //源,然后添加淘宝的源https ///,然 后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass 了 $ gem sources --remove / $ gem sources -a / 【如果你系统不支持https,请将淘宝源更换成:gem sources -a http ://】 $ gem sources -l *** CURRENT SOURCES *** # 请确保只有 $ gem install sass 安装好之后执行sass -v就可以看到sass的版本了 实在实在不行,就安装离线文件吧,但是失败率也很高 gem install ./.../sass-3.4.22.gem 二、编译sass文件的方式 1.命令行编译 可以通过cmd命令行执行sass方法来编译 例如: sass scss/a.scss:css/a.css sass 后 写要编译的sass文件的路径,‘:’后 写的是 要输出的目录及名字 需要注意的是:必须有这个文件夹才能在里 生成css 这样的话写一句执行一次编译一次有些太麻烦 可以开启一个watch来监听文件变化来进行编译 sass -- atch scss:css --watch表示要监听 :前后的两个都是文件夹,表示scss文件夹的文件改变就编译到css文件夹 2.其他方式编译 除了命令行工具其实还可以用考拉、gulp等工具进行编译,但是ruby和sass是必须要安装的 考拉的方式就不多做介绍了,大家i 自己去看一下 gulp的话呢是需要gulp-sass的模块来编译,使用方式类似于gulp-less 这里是网址,点击查看 三、sass 四种风格: sass编译的格式 sass编译输出的css有四种格式 nested 嵌套 compact 紧凑 expanded 扩展 compressed 压缩 这些样式会影响输出的css的格式 简单介绍一下: css默认输出的嵌套 ul{ font-size:15px; li{ list-style:none; } } 》 ul { font-size: 15px; } ul li { list-style: none; } 紧凑compact 在编译的时候需要执行 sass --watch scss:css --style compact 这个时候输出的代码就是 ul { font-size: 15px; } ul li { list-style: none; padding: 5px; } compressed 压缩 在编译的时候需要执行 sass --watch scss:css --style compressed > ul{font-size:15px}ul li{list-style:none;animation:all 0.4s} expanded 扩展 更像是平时写的css一样 在编译的时候需要执行 sass --watch scss:css --style expanded > ul { font-size: 15px; } ul li { list-style: none; animation: all 0.3s; } 四、sass与scss: sass的两个语法版本 sass一开始用的是一种缩进式的语法格式 采用这种格式文件的后缀名是.sass 在sass3

请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片



©2010-2013 max.book118.com在线文档投稿赚钱网. All Rights Reserved 蜀ICP备08101938号