如何使用CSS3/SCSS实现逼真的车窗雨滴效果
参考下面方法：
1先实现一个小雨滴
首先雨滴是一个个小的椭圆形元素：
.raindrop {
width: 8px;
height: 7px;
border-radius: 100%;
}
2其次雨滴是一个个凸透镜，能折射出远处的景色，远景所处位置远大于2倍焦距，成倒立、缩小的实像。
“倒立”的效果可以通过旋转180°来实现，“缩小”的效果通过设置背景图片的尺寸来达到（下面把背景图缩小到全屏的5%并居中）。
.raindrop {
position: absolute;
background-image: url(“背景图地址”);比如：i.imgur.com/xQdYC7x.jpg 前面加上http://。
background-size: 5vw 5vh;
background-position: 50%;
transform: rotate(180deg) rotateY(0);
}
这样就得到了一个小雨点。
3随机雨滴
接着要创建一些随机分布的雨点对象，假如只有几个，可以手动编写CSS代码，但如果有几十个，直接写CSS代码的效率和可维护性就很差了。
使用SCSS的random方法，来随机微调雨点对象的尺寸和绝对位置。
// 生成0到1之间的随机数
$x:random();
$y:random();
// 随机尺寸和位置
$drop-width:5px+random(11);
$drop-stretch:0.7+(random()*0.5);
$drop-height:$drop-width*$drop-stretch;
.raindrop:nth-child(#{$i}){
left:$x * $width;
top:$y * $height;
width:$drop-width;
height:$drop-height;
background-position:percentage($x) percentage($y);
}
}
4效果增强
还可以给雨滴添加一点闪光的视觉效果，通过CSS3滤镜来实现：
[css] view plain copy
.raindrop {
filter: brightness(1.2);
-webkit-filter: brightness(1.2);
}
如何在webpack+vue.js下配置使用scss
//在项目下，运行下列命令行
npm install –save-dev sass-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install –save-dev node-sass
//解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及
声明的内部样式进行加载
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(“style”, ‘css!sass’) //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:’style!css!sass’
怎么用webstormscss生成css文件夹的方法
这个要通过ruby安装scss,然后在webstorm中配置file watcher 安装ruby,cmd下通过gem install sass,这个可以去网上找一个具体的操作.打开webstorm,点击settings,在左边tools里面找到file watcher,点击右边的+号,选择scss,这时候,如果前面安装好sass的话,在program中找到sass的bat文件(我的是Ruby22-x64\bin\scss.bat) 确认即可.
hbuild怎么引用scss文件
Sass的安装:
1.安装：SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
gem install sass
然后，就可以使用了。
2：使用：
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。SASS提供两种编译方式，一种是手动编译，一种是监视编译(–watch)，手动编译就是当你撰写好CSS时下指令去做编译，监视编译则是你指令一个目录，当此目录里面的*.scss档案有改变时（新增、覆写等等），就会自动去做编译的动作。先来讲手动编译方式：
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
sass test.scss
如果要将显示结果保存成文件，后面再跟一个.css文件名。
sass test.scss test.css
SASS提供四个编译风格的选项：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass –style compressed test.sass test.css
还有一种监视的方式做编译，在命令行中切换到当前sass或者scss文件所在的目录，然后运行
sass –watch scss:css
SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。
Compass的安装:
1.安装：安装ruby之后，输入命令
gem install compass
2.使用：创建一个 COMPASS 项目
在命令行中切换到你需要创建项目的目录，运行：
compass create “projectname”
这个命令会创建一个包含一系列文件的目录，其中最重要的是配置文件 config.rb，其他文件如果你不需要都可以删除。
在 config.rb 中你可以修改 SASS 和 CSS 的目录及其它一些基础设置。
实时编译 SASS 文件
COMPASS 提供的默认方法是：
在命令行下切换到项目目录，运行
compass watch
COMPASS 将会实时监控 SASS 目录的文件变化，只要你一保存文件，立即将相应文件编译为 CSS 文件。
webstorm 怎么添加scss
1、下载ruby最新版2.1.5，安全起见可以安装ruby 1.9.3-p551
ruby安装文件自己百度一下，容易找到。
2、安装过程中，一定注意勾选第二项！否则cmd命令会找不到。
3、安装完后，检查是否安装成功
Win+r快捷键启动cmd命令窗口，输入ruby -v，注意中间空格，显示版本号说明成功。
4、借助ruby安装sass，dos命令窗口输入“gem install sass”
该命令一定要在system32文件下cmd.exe执行，默认安装目录在C:\Windows\System32\cmd.exe文件
5、安装过程中，耐心等待，直到提示安装进度100%。
同样通过“sass -v”命令(中间有空格)检查安装结果，显示当前版本号。
6、接着需要配置webstorm下sass编译环境。
打开webstorm创建空项目，点击“File”菜单选择“Setting”，搜索“watcher”关键字，
7、点击右边绿色加号，选择“SCSS”文件类型。
8、输入监视文件类型名称(随便写)，关键第二个选项，一定要选择ruby安装目录bin文件下的scss.bat文件
9、最后，创建.scss文件输入scss css代码，保存后会生成后缀.css文件，说明环境编译没问题。
在html中怎么调用sass文件
这个文件夹应该是webstorm这样的编辑器创建的,我猜想它可能用于记录一些project项目配置等,比如:查询索引.
webstrom怎样设置scss生成css的文件路径
导入.sass或.scss文件
css有一个不太常用的特性，即@import导入功能，它允许在一个css文件中导入其他css文件。然而，结果是只有执行到@import规则时，浏览器才会去下载其他css文件，这会导致页面样式加载特别慢，从而容易出现页面闪的问题。
sass也有@import导入规则，与css不同的是，sass中的@import规则会在生成css文件时，把相关的文件导入合并成一个文件，而无需浏览器去下载其他的文件。另外在被导入文件中定义的变量等也可以在导入文件中正常使用。
在使用@import导入sass文件时，可以省略sass文件的后缀名.sass或.scss，例如：
– a.scss
body {
background-color: #f00;
}
– style.scss
@import “a”;
div {
color: #333;
}
编译后的style.css文件内容如下:
body {
background-color: #f00;
}
div {
color: #333;
}
webstorm里怎么用Compass/Scss,在scss中引入compass/reset就报错
安装COMPASS.方法:gem install compass Compass有五个模块reset、 css3、 layout、 typography、 utilities,要导入指定模块的话,在scss文件中使用如下语法:@import ＂compass/reset＂;
react+webpack+scss 怎么编译css独立文件
处理scss文件需要 sass-loader
npm install sass-loader node-sass –save-dev
【注】 以下配置中需要用到的模块，请自行安装
extract-text-webpack-plugin
postcss-loader
precss
autoprefixer
然后在webpack.config.js文件做以下配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//css文件提取器需要的插件
varExtractTextPlugin=require(‘extract-text-webpack-plugin’);
//postcss-loader 需要的配置项
varprecss = require(‘precss’);
varautoprefixer = require(‘autoprefixer’);
module.exports = {
…
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(‘style’,’css!postcss-loader’,’sass’)}
]
},
postcss: function() {
return[precss, autoprefixer];
}
}
scss 怎么定义css3动画
itjob为你解答: @keyframes xxx{ from{background:red;} to{background:black} 或 0%{} 50%{} 100%{} } .itjob{ animation-name:xxx; animation-duration:2s; . . . }