sass学习--在htm文件中使用
一、导语
最近的战狼2好火爆啊,每天看战狼2的票房一路高飙,我估计比吴京还开心。看了这部戏的拍摄过程,除了敬佩就是踏实,是的,吴京是电影圈隔了这么久后能踏踏实实做电影的了,纯属个人见解,不喜请忽略。。。。。。。。。。。。。。。。。。。。。
说道踏实,好吧,我要把基础给踩踩了,说说最简单的sass是怎么在html中运行的
二、正文(文中编辑器使用webstorm)
1、创建项目untitlecl(如此随意,我连默认名都懒得改了,,,,,,,),再创建H5格式的html textsass.html
2、textsass.html
引入sass的样式文件,注意引入时,要写.css的后缀名而不是.sass的后缀名
3、创建sass格式的文件
4、编写sass文件的样式
5、控制台输入 sass common.sass (common为sass文件的样式名)可在控制台上看到编译成功后的css文件
6、将sass文件编译成css置放于项目中,可使用命令 sass common.scss common.css
自动编译后生成在项目中结构如下:
7、运行项目可看到效果
8、我们不可能每次改某个样式,都要重新 sass common.scss common.css 一下吧,所以有个监听方法 sass --watch common.sass:common.css
这样每次一修改样式,刷新下浏览器,就能看到最新的效果了。
若是要监听整个项目的样式,则使用命令 sass --watch stylesheets/sass:stylesheets/css
9、SASS提供四个编译风格的选项:
1)、nested:嵌套缩进的css代码,它是默认值。
2)、expanded:没有缩进的、扩展的css代码。
3)、compact:简洁格式的css代码。
4)、compressed:压缩后的css代码。
一般生产环境中使用最后一个 sass --style compressed test.sass test.css
三、结尾
边琢磨边写的,肯定有许多bug,欢迎指出
sass学习--在htm文件中使用的更多相关文章
- python学习:python文件中空格和换行符的捕获和文本文件的转存
0. 背景 之前公司的项目中,需要在嵌入式系统中实现一个http的网页端内容,由于项目历史遗留问题,公司是采用的将html文件转成c语言头文件的方式,每次修改页面端都需要从新编译一下程序,非常的繁琐. ...
- C++学习——在C文件中调用C++文件中的函数
1.CPP文件中的内容 #include "mytest.h" #include <iostream> using namespace std; int add(con ...
- Java学习-043-获取文件在目录中的路径
我们在日常的电脑使用中,经常需要在当前目录或当期目录及其子目录中查找文件,并获取相应的文件路径名.在我们的自动化测试中,也经常需要确认文件在目录中是否成功生成或已存在,因而我写了一个小方法来实现. 获 ...
- Java学习-040-级联删除目录中的文件、目录
之前在写应用模块,进行单元测试编码的时候,居然脑洞大开居然创建了一个 N 层的目录,到后来删除测试结果目录的时候,才发现删除不了了,提示目录过长无法删除.网上找了一些方法,也找了一些粉碎机,都没能达到 ...
- PE结构学习笔记--关于AddressOfEntryPoint位置在文件中怎么确定问题
第一次学习PE结构,也不知道有没有更好的办法. 1.AddressOfEntryPoint 这个成员在OptionalHeader里面,OptionalHeader的类型是一个IMAGE_OPTION ...
- Linux学习_按时间顺序解压多个文件,搜索文件中的内容
ls的结果按时间数据先排序,再取末尾5个文件,再调用tar命令 ls -1 | sort -u | tail -5 |xargs -n1 tar xzvf 利用grep命令从文件中搜索. grep - ...
- (转)MyBatis框架的学习(四)——Mapper.xml文件中的输入和输出映射以及动态sql
http://blog.csdn.net/yerenyuan_pku/article/details/71893689 前面对MyBatis框架的学习中,我们对Mapper.xml映射文件多少有些了解 ...
- 深度学习tensorflow实战笔记(1)全连接神经网络(FCN)训练自己的数据(从txt文件中读取)
1.准备数据 把数据放进txt文件中(数据量大的话,就写一段程序自己把数据自动的写入txt文件中,任何语言都能实现),数据之间用逗号隔开,最后一列标注数据的标签(用于分类),比如0,1.每一行表示一个 ...
- 将多个sass文件合并到一个文件中
将多个sass文件合并到一个文件中 应用场景:制作angular npm包的时候,定义的一些全局样式,自定义主题色这类的情况下,多个scss文件会要合并成一个文件并写到dist文件里,发布到仓库中. ...
随机推荐
- pmap 命令详解
通过查看帮助,返回了如下信息: Usage: pmap [options] pid [pid ...] Options: -x, --extended show detai ...
- 使用http -server 搭建本地简易文件服务器
安装 npm install http-server -g 使用 1. cd project . 2. hs [pwd] -o, 默认是当前路径 ./ 3. 其他选项 -p Port to use ( ...
- 使用C语言和Java分别实现冒泡排序和选择排序
经典排序算法--冒泡和选择排序法 Java实现冒泡排序 基本思想是,对相邻的元素进行两两比较,顺序相反则进行交换,这样,每一趟会将最小或最大的元素放到顶端,最终达到完全有序,首先看个动图: 我们要清楚 ...
- ssh项目访问路径及url请求书写
在ssh项目中配置好Struts后,一般可以采用两种方式进行后台请求: 1.html形式,包括a标签,form表单,ajax等.此时的访问链接必须写全路径,可以是相对路径,也可以是绝对路径 相对路径方 ...
- localStorage和sessionStorage总结以及区别
(1)兼容的手机和浏览器: (2)使用 .setItem( key, value)存键值数据 sessionStorage.setItem("key","value&qu ...
- php中常用的字符串查找函数strstr()、strpos()实例解释
string strstr ( string $haystack , mixed $needle [, bool $before_needle = false ] ) 1.$haystack被查找的字 ...
- Chrome Extension in CLJS —— 搭建开发环境
前言 磨刀不误砍柴工,本篇将介绍如何搭建Chrome插件的ClojureScript开发环境. 具体工具栈:vim(paredit,tslime,vim-clojure-static,vim-fir ...
- Python数据分析流程
一.数据分析的步骤: 1.查看数据并提出问题 2.数据清洗 3.代码编写,提取出结果数据,并分析是否有异常数据,修改代码 4.根据数据选择合适的图表进行展示 5.根据图表小组讨论交流获得最终的结果 二 ...
- 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境
转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...
- 关于form表单上传图片的一些记录
jsp页面 <form class="form-horizontal" role="form" action="brandAction_addB ...