锐客网

  1. 首页 > 睿知 > >

如何才能写出更优秀的CSS代码-css代码教程( 三 )

生活知识经验知识


之后跟着 。你有两个选择：
你可以根据7-1模式团队CSS代码 。那么你需要留下abstracts、components、layout 和 base 文件夹 。你想将任何的分块文件和 mail.css 放在一个大文件夹内 。那么你会获得如下结构：sass/
_animations.scss
_base.scss
_buttons.scss
_header.scss
_variables.scss
main.scss
但哪些不接受scss文件的浏览器该怎么办呢？这是我们的末尾一步 。我们现在就来学习怎么样将SCSS编译为CSS 。
从 SCSS 到 CSS首先 。你需要 Node.js 和 NPM（或 Yarn） 。
我们将使用一个名为 node-sass 的包 。它可以让我们将 .scss 文件编译为 .css 文件 。
它的 CLI（命令行窗口）相当容易使用：
node-sass input output [options]
它有多个选择 。但我们只使用之中两个：
-w：监视目录或文件 。这说明着node-sasswaits在时刻监督你的代码是否发生改变 。只要出现发生 。它就会全自动编译成CSS 。这在研究时非常有用 。--output-style：CSS文件的输出内容 。它的值可以是：嵌套、展开、紧凑、压缩 。我们将使用它来构建你的CSS文件 。如果你是一个奇怪心很重的人（我渴望如此 。因为研究人员大概奇怪！）那么 。请点一下这里调查完全的文档（） 。
现在我们了解需要用哪些工具 。其余的事情更简单 。只需按以下步骤操作：
创建项目：mkdirmy-app cd my-app初始化：npm init添加node-sass库：npm install node-sass --save-dev创建文件夹 。index.html和main.scss文件：touch index.html
mkdir -p sass/{abstracts,base,components,layout} css
cd sass touch main.scss
将这些脚本加入到package.json文件中：{
"scripts": {
"watch": "node-sass sass/main.scss css/style.css -w",
"build": "node-sass sass/main.scss css/style.css --output-style compressed"
将包含编译好的 CSS 文件的连接加入到 index.html 文件的 head 标签内：!DOCTYPE html
html lang=”en”
head
meta charset=”UTF-8"
meta name=”viewport” content=”width=device-width, initial-scale=1.0"
meta ”
link rel=”stylesheet” href=https://www.wangchuang8.com/”css/style.css”
titleMy app/title
/head
body
h1 class=”heading”My app/h1
/body
/html
之后跟着就可以了 。你准备好了！你可以在编程的时候运行npm run watch 。并在浏览器中打开index.html文件 。如果你想缩小CSS 。只需运行npm run build 。
补充添加24小时从头开始加载
你可能渴望添加24小时从头开始加载以提升事情效率 。而不用手动从头开始加载本地index.html文件 。
你可以根据以下简单的步骤操作：
安装live-server应用包：npm install -g live-server 。小心：它是一个全局包 。将npm-run-all添加到项目依赖项中：npm install npm-run-all --save-dev：有了它我们就可以同一时间运行多个脚本 。将这些脚本添加到package.json：{
"scripts": {
"start": "npm-run-all --parallel liveserver watch",
"liveserver": "live-server",
"watch": "node-sass sass/main.scss css/style.css -w",
现在如果你运行 npm run start 。就可以立刻观看到的代码的变更 。
添加全自动前缀
我们设置好了研究工具 。现在 。让我们来谈谈构建工具 。特殊是：全自动前缀（Autoprefixer） 。
它是一个工具（尤其是postcss插件） 。它可以分析CSS 。并使用这些值（规则中 。
事实上 。在构建网址时 。你可能会使用有的并非任何浏览器都完整接受的新功能 。因此 。提供商方案可以提供对这些功能的接受 。
以下是一个示例：
-webkit-animation-name: myAnimation;
-moz-animation-name: myAnimation;
-ms-animation-name: myAnimation;
这其实就是为什么我们需要全自动前缀来帮助我们的CSS代码获取浏览器的兼容 。而不用增加特外的杂乱性 。
那么我们怎么样用更聪慧地构建CSS呢？
将任何的SCSS文件编译成一个主CSS文件 。使用全自动前缀为CSS文件添加前缀 。压缩CSS文件还有末尾几步 。请坚持就这样看下去 。马上就结束了 。
添加两个依赖项 。postcss-cli和autoprefixer：npm install autoprefixer postcss-cli --save-dev改写build脚本 。并将这些脚本添加到package.json：{
"scripts": {
"start": "npm-run-all --parallel liveserver watch",
"liveserver": "live-server",
"watch": "node-sass sass/main.scss css/style.css -w",
"compile": "node-sass sass/main.scss css/style.css",

推荐阅读


上一篇：学习强国如何订阅隐藏的订阅号？学习强国订阅隐藏订阅号的方法步骤

下一篇：9岁,150度/225度 豪雅新乐学镜片,效果有了解的吗？