在sass里面怎样引用sass文件
假设是在SASS编译阶段生成随机文件名,在模板文件如何引用一个确定的静态文件资源呢?
所以应该在发布阶段去解析模板文件中的静态资源,采用一定策略来生成文件名或版本号,一般采用两种办法:
1.在模板文件引用静态资源的时候做处理,加一个过滤器;
2.发布时检索文件中的link和script,改变文件名;
至于随机数的策略就无所谓了,时间戳,文件MD5之类的都行,时间戳的好处是简单暴力,坏处是客户端的缓存在每次发布后都会无效,MD5的方法会更有效,但是这意味着发布时需要前端和后台的模板代码最好在一台服务器上,不然读取文件做MD5运算会很麻烦;
另外就是如果不是跟后缀的模式,需要配置nginx(假设的服务器是nginx)或者做一个controller来专门解析资源了。
webtorm sass封装的类怎么引入
1.搭建环境(简单的下载安装Ruby)
下载安装Ruby,Windows下的Ruby下载,Mac OS X 就跳过这一步,Linux自己去找吧(这部分用户的强项)
建议安装的时候勾选下,这样可以直接通过cmd命令行操作(不必手动添加Path)
2.安装SASS
完成第一步之后,在开始菜单中找到并运行Ruby命令行
启动可以看到命令行窗口,安装SASS(LESS安装方法相同),在命令行键入如下代码(其实官网顶部所列的三条即为常用的)并回车:
gem install haml
3.开始工作
打开编辑器创建style.sass文件,拷贝官网的演示代码,如:
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
但是项目中我们需要用到的是.CSS后缀名的样式文件,转换方法如下:
在命令行键入
sass –watch style.sass:style.css
这里需要注意的是但前命令行所在的目录是相对应的,由于我的演示站点路径为
X:IDEAsass
所以需要从默认的C盘桌面指定到相应文件目录再运行命令
运行成功可以看到目录下多了一个style.css文件,文档中生成的代码如下:
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
如果想要监听匹配整个CSS文件目录代码如下:
sass –watch stylesheets/sass:stylesheets/css
OK,正常运行,我用的IDEA编辑器自带有SASS插件的,结构还是蛮清晰的
vue中怎么全局引入sass文件
1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块.如果是基于vue.js编写的插件我们可以用 Vue.use(…)2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办?第一步:最好建立一个全局的命令文件例如:directive/directive.js 第二步:利用Vue.directive()建立一个全局命令,并将它暴露出来,例如一个focus 让表单自动聚焦 第三部步:在main.js(入口JS文件)中将它引入,可以省略文件后缀 这样任何一个Vue文件只要这样v-focus(命令名),就可以很方便的用到了
如何为WebStorm设置SASS的File Watchers
Webstorm是一个很牛叉的IDE,现在工作每天都是用它了。
最近开始用SASS,LESS等来写CSS,而在Webstorm中,它自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等。
LESS的实时编译很简单,在node平台安装一下即可。
而在折腾SASS在Webstorm上的实时编译时,花了我一点时间。因为按照网上的教程设置都不成功,最后自己把设置改来改去终于折腾好了。
下面就是在WebStorm设置SASS的File Watchers的步骤:
1. 安装Ruby
http://www.rubyinstaller.org/,去这里下载,然后安装。
2. 安装Sass
安装好Ruby后,打开CMD命令,输入:
gem install sass
注意:
这里有可能安装没反应或提示网络错误什么的。解决办法是使用淘宝的Ruby gem镜像:
$ gem sources –remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass
3. 上面都安装没问题以后,就可以设置Webstorm或PHPStorm了
3.1 打开Webstorm的设置界面,然后搜索File Watcher;
3.2 点击File Watchers界面的增加按钮;
3.3 然后设置界面如下:
注意:
如果你想用SCSS,并且Ruby是安装在默认路径下,那么”File Type:“和”Program:“那里的设置就和我一样;
如果是用SASS,那么你在新建时应该选择SASS的类型,”Program:“也应该选”sass.bat“。
gulp – sass怎样把转成的css放到目标位置
var gulp = require(‘gulp’); var sass = require(‘gulp-sass’); gulp.task(‘sass’, function () { return gulp.src(‘./sass/**/*.scss’) .pipe(sass().on(‘error’, sass.logError)) .pipe(gulp.dest(‘./css’)); }); 其中,gulp.dest这句就是编译sass为css到指定的路径上.
vue中外部js和css引入的方法?
现在直接@import就行了
为什么电脑启动出奇得慢 ?
1—看看硬件装好了吗,有一些会对系统有影响。
2—看看任务管理器,CPU有没有在不运行文件的情况下超过10%
3—现在的KV 金山 瑞星…都加入了一些对网页 插件 邮件的监控
无疑增大了系统的负担,可以在这些软件相关设置选项中关闭不必要的监控功能,这个看的细点,不要什么都装.
4—蠕虫病毒,看看在任务管理器里有没有svchost.exe/sass.exe这种进程,这种对CPU占用高(重装)
5—删除 启动组 中的快捷方式:方法是:右点开始–打开,弹出一个c\ddocuments and settings\**\[开始]莱单–程序–启动,打开文件夹;删除其中所有快捷方式图标,不要小看这个哟!!
6—关闭”自动发送错误报告”功能;开始–控制面板–系统–高级;
7—开始–运行–clipbrd—编辑;全部删除.
8—用瑞星和卡卡清理插件
9—整理磁盘
10虚拟内存;我的电脑–属性–高级–性能设置;一般最大是最小的1.5~~2倍(如256的就是,384 768)