Vue 中sass的基本操作

如果要在组件中使用，必须导入相应的资源文件。 每个需要用到变量的vue文件都需要做导入操作，简化操作，可以使用 sass-resources-loader 参考官网 sass-resources-loader 。如果使用vue-cli，可以参考 vue-cli自动化导入 这里以vue-cli4为例，具体实现如下： 1.首先，在scss中配置要导出的变量 2.在vue文件导入变量并使用

事实证明，LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性，比如下面这些：● 混入(Mixins)——class中的class；● 参数混入——可以传递参数的class，就像函数一样；● 嵌套规则——Class中嵌套class，从而减少重复的代码；● 运算——CSS中用上数学；● 颜色功能——可以编辑颜色；● 名字空间(namespace)——分组样式，从而可以被调用；● 作用域——局部修改样式；● JavaScript 赋值——在CSS中使用JavaScript表达式赋值。LESS和Sass的主要不同就是他们的实现方式，LESSS是基于JavaScript，所以，是在客户端处理的。另一方面，Sass是基于Ruby的，然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦我完成了开发，我就复制然后粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出，从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。关于变量在LESS和Sass中的唯一区别就是，LESS用@，Sass用$。同时还有一些作用域上的差别，我后面会提到。混入(mixin)偶尔，我们会创建一些会在样式表中重复使用的样式规则。没有人会阻止你在一个HTML的元素中使用多个class，但是你可以用LESS，在样式表中完成。.border {border-top: 1px dotted #333;}article.post {background: #eee;.border;}ul.menu {background: #ccc;.border;}这可以给到你与你在两个元素中分别添加.bordered class同样的效果——而且仅仅在样式表中就完成了。而且它工作的很好：文字和无序列表都被用上了边框样式在Sass中，你要在样式规则前面添加@mixin声明，规定它是个嵌套。然后，通过@include来调用它。@mixin border {border-top: 1px dotted #333;}article.post {background: #eee;@include border;}ul.menu {background: #ccc;@include border;}参数混入就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章，内容是包含着由有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。.border-radius( @radius: 3px ) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;}在这个例子中，.border-radius有个默认的3px的圆角，但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。Sass中的语法很像LESS，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。选择器继承这个东西LESS并没有提供。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了。.menu {border: 1px solid #ddd;}.footer {@extend .menu;} /* 上面的写法规则和下面的效果是一样的： */.menu, .footer {border: 1px solid #ddd;}嵌套规则在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS，你可以嵌套id、class以及标签。#site-body { ….post { ….post-header { …h2 { … }a { …&:visited { … }&:hover { … }}}}}上面的代码最终和上面的例子（那一长串的选择器）的效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，该功能类似于JavaScript中的this。运算这可能是你所期望的：使用数字或者变量在你的样式表中实现数学运算！@base_margin: 10px;@double_margin: @base_margin * 2;@full_page: 960px;@half_page: @full_page / 2;@quarter_page: (@full_page / 2) / 2;声明下，我也意识到我可以除以4来获得@quarter_page变量，但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中，小括号也是必须的，比如 border: (@width / 2) solid #000。Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。/* Sass */2in + 3cm + 2pc = 3.514in /* LESS */2in + 3cm + 2pc = ErrorColor函数在文章开头，我提到了LESS如何帮我在编码过程中处理围绕着一个调色板。对此贡献最大的一部分就是颜色函数。加入你用一个标准的蓝色贯穿到你的样式中，然后你想要在表单中用这个蓝色来做一个渐变的按钮。你可以打开Photoshop或者其它的编辑器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者，你可以只是使用LESS中的颜色函数。@blue: #369;.submit {padding: 5px 10px;border: 1px solid @blue;background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%);/*Opera*/background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/color: #fff;text-shadow: 0 -1px 1px rgba(0,0,0,0.4);}lighten函数很明显就是用百分比值来减轻颜色，在这个例子中，它将减轻这个基础的蓝色的10%。这种方法可以让我们变化的元素或者其它任何元素的颜色值——只是简单的改变基础颜色而已。这对于主题(模板)来说非常有用。而且，如果你使用参数功能，像上面提到的，你还可以更简单的应用到一些浏览器私有前缀的声明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。还有很多其它的色彩函数，比如变暗或者调整颜色的饱和度，甚至你可以旋转色盘来使用其它颜色。我建议亲自尝试下你能想出的（用法）。Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的还是lighten和darken。如果你想了解更多，可以看一下这篇很详细的介绍。条件语句与控制这是一个的确很赞的东东，也是另一个LESS不支持的功能。使用 Sass，你可以使用if { } else { } 条件语句，以及for { }循环。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。/* Sample Sass "if" statement */@if lightness($color) > 30% {background-color: #000;} @else { } /* Sample Sass "for" loop */@for $i from 1px to 10px {.border-#{i} {border: $i solid blue;}}名字空间(Namespaces)名字空间可以用于组织我们的CSS到另一个档次，我们可以将一些公用的样式分组，然后在用的时候直接使用。例如，如果我们创建了一个名为default的样式分组，我们就可以在用到的时候直接从该组中调用。#defaults {.nav_list () {list-style: none;margin: 0; padding: 0;}.button () { … }.quote () { … }}然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。nav ul {#defaults > .nav_list;}作用域作用域是编程中的标配，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。@color: #00c; /* 蓝色 */#header {@color: #c00; /* red */border: 1px solid @color; /* 红色边框 */}#footer {border: 1px solid @color; /* 蓝色边框 */}因为我们在#header中重新定义了color变量，变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方，如果没有被重新定义，都会保持那个原始的值。作用域在Sass中稍有不同。在上面的代码中，当@color变量变为红色后，代码中，此处之后的该变量的值，将会被重写（成为红色）。注释这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出，然后，结果是，“无声的”。导入导入也相当符合标准。标准的 @import: ‘classes.less"; 处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩展名是可选的，所以 @import ‘classes"; 也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import: ‘reset.css";)。字符串插入字符串也是可以用于变量中的，然后通过@{name}来调用。@base_url : "http://www.qianduan.net";background-image: url("@{base_url}/images/background.png");转义(Escaping)可能偶尔会需要引入一个CSS中非法或者LESS无法识别的值。通常是一些IE的hack。要避免抛出异常并破坏LESS，你将需要避开它们。.class {filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";} /*实际上将会输出下面的代码: */.class {filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);}JavaScript 赋值这是LESS中我最中意的部分：在样式表中使用Javascript——相当精彩。你可以使用表达式，也可以参考环境方向来使用反单引号。@string: `"howdy".toUpperCase()`; /* @string 变成 "HOWDY" */ /* 你也可以使用前面提到的插值： */@string: "howdy";@var: ~`"@{string}".topUpperCase()`; /* 变为 "HOWDY" */ /* 获取文档的信息 */@height = `document.body.clientHeight`;输出格式然而LESS并没有输出设置，而Sass提供4中输出选项：nested, compact, compressed 和 expanded。结语这两个方法有很多共同点。对写代码的设计师来说，它们都是很酷的工具，它们也可以帮助开发者更有效和快速的工作。如果你是Ruby或HTML的粉丝，那么Sass会是你的好助手。对我来说，一个PHP和JavaScript极客，我倾向于LESS，因为它便于引入和能够使用JavaScript的表达式以及文档属性。我怀疑我甚至接近真正理解在样式表中编程的可能行了，但是我仍坚持尝试。如果你在工作中有用到它们中的一个，或者两个都用，我很乐意听到关于它的更多内容，并看到你的成果。当然，技巧、诀窍、更正一直是很欢迎的。

好像不能直接引用.scss（和.sass一样，只是写法规范不同）文件，需要通过工具（软件或命令行）先进行编译生成.css文件后，再引入.css文件使用。

AU999是千足金的标志，而且国家标准首饰最高就是千足金。根本就没有万足金一说。

1.变量的使用 字符串中的变量，写在 #{}中 3.嵌套 深度选择器

SASS？是SAS吧。SAS系统(Statistics Analysis System)，最早由北卡罗来纳大学(The University of North Carolina)的两位生物统计学的研究生编制，最早祗是一数学统计软体，后於1976年由Jim Goodnight 博士及John Sall博士等人成立SAS公司，并正式推出SAS软体。经过多年的发展，SAS在资料处理和统计分析方面有著广泛的应用，其使用遍及金融、医药卫生、生产、运输、通讯、科学研究、政府、教育、心理、社会科学等不同领域。(http://zh.wikipedia.org/wiki/SAS%E7%B3%BB%E7%BB%9F)同样，SPSS原名Statistical Package for the Social Sciences(社会科学统计包），由於用户早已不限於社会科学界，故此在2000年根据缩写SPSS改为Statistical Product and Service Solutions(统计产品与服务解决方案，惟一般仍称SPSS)——不过很多老用户还并不知晓。(http://zh.wikipedia.org/w/index.php?title=SPSS&variant=zh-tw)SPSS和SAS软件在学校应该可以提供使用的，不能教你非法下载，那是侵犯版权的行为。至於教程方面，可参：http://www.fjmu.edu.cn/news/spss/doc3/index.htm

卡布奇诺的幸繁rSanimal

目前场景是接到的项目中没有统一样式处理，例如不同模块，有的使用了 sass ，有的使用了less。 我们知道sass是成熟、稳定、强大的 CSS 预处理器，而 SCSS 是 Sass3 版本当中引入的新语法特性，完全兼容 CSS3 的同时继承了Sass强大的动态功能。 而Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。 两者各有千秋，没有特殊洁癖个人觉得均可，但是因为项目中使用了 ant-desgin-vue, 而它本身是使用less的，于是决定项目中还是统一使用 less 吧。 1、首先移除 node-sass 和 sass-laoder 2、将所有的 lang="scss" 替换成 lang="less" 3 、变量控制定义： 将 $ 更改为 @ 4、.scss 后缀文件改为 .less 例如 下面引入的 chart.scss 文件，应该改为 chart.less

1.编译环境不一样Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中。2.变量符不一相less是@，而scss是$,而且它们的作用域也不一样，less是块级作用域3.输出设置不一样Less没有输出设置，sass提供4种输出选项，nested,compact,compressed和expanded nested：嵌套缩进的css代码(默认) expanded：展开的多行css代码 compact：简洁格式的css代码 compressed：压缩后的css代码4.sass支持条件语句，可以使用if{}else{},for{}循环等等，而less不行5.引用外部css文件sass引用外部文件必须以开头，文件名如果以下划线形状，sass会认为该文件是一个引用文件，不会将其编译为css文件。less引用外部文件和css中的@import没什么差异。6.sass和less的工具库不同sass有工具库Compass, 简单说，sass和Compass的关系有点像Javascript和jQuery的关系,Compass是sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了sass的功能。less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用less语法编写。总结：不管是sass，还是less，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，sass的功能比less强大,基本可以说是一种真正的编程语言了，less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择less。 （BY三人行慕课）

新建文件 /style/element/index.scss 刚开始按照element-plus官网描述步骤添加，在main.js中引入创建的文件， 但是会有报错信息，如下： @forward rules must be written before any other rules. 必须写在任何其他规则之前? 解决方案： 在项目 vue.config.js 配置文件中修改，解决sass变量报错问题 main.js 中引入的文件可以删除了。

.father { & > .son { color: red; }}

你可以试试css预处理语言，sass和less

为了统一页面风格在编写CSS样式文件时经常会大量复用相同的颜色或者字号，加重开发工作量的同时也不利于后期的维护，所以需要用到CSS全局变量。声明全局变量CSS全局变量的声明是在变量名称前加两个中横线--。body { --Color: #2C51CD; --BackGround: #B4D4FD;}上述代码中，body选择器中声明了Color和BackGround两个变量。而使用--是因为$被Sass占用了，@被Less占用了。“变量的声明对大小写敏感。如：Color和color表示两个不同的变量。读取变量使用var()函数来读取变量。p { background: var(--Color);}var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。p { background: var(--Color, #2C51CD);}第二个参数不处理内部的逗号或空格，都视作参数的一部分。p { font-family: var(--fontF, "Roboto", "Helvetica"); margin: var(--Margins, 15px 20px 25px);}var()函数还可以用在变量声明中body { --Color: #2C51CD; --BackGround: var(--Color);}

最近研究sass，用的是vs+vs插件，实在是太大了（虽然电脑跑的动）之前一直用sublime，所以决定继续改用轻量级的开发工具。注：我是sublime Text2,（3应该差不多）【进入正题】同样出现楼主的问题，于是开始百度（原谅我没有翻墙用google）。百度后结合实际情况先这样解决：1.Preferences->Browse Packages...2.找到SASS Build文件夹3.打开SASS.sublime-build{ "cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"], "selector": "source.sass, source.scss", "line_regex": "Line ([0-9]+):", "osx": { "path": "/usr/local/bin:$PATH" }, "windows": { "shell": "true" }}4.在"selector": "source.sass, source.scss",后面加上"encoding":"cp936",5.重启sublime但是出现ctrl+b出现新的问题‘sass"不是内部或外部命令，也不是可运行的程序或批处理文件看到这里我恍然大悟，原来不是编码问题，而是环境变量出问题了。后来发现自己安装ruby没有勾选添加环境变量【总结】：由于我添加环境变量后把修改的"encoding":"cp936",删除依然可以编译成功，我觉得sublime中sass编译（或者ruby等编译）出现[Decode error - output not utf-8]问题其实是环境变量未添加。解决方法就是手动在高级系统设置中添加。（如果实在懒可以卸掉ruby重新安装，记得勾选中间的添加环境变量。记得安装sass）最后补充一下，可以先试一下我试过的添加encoding方法，因为我也不是100%确定。

ruby安装 因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个ruby 在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境 sass安装

ruby安装因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个ruby在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境sass安装如果你喜欢偷懒，或者你公司网络限制比较多，请直接看最后一段安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby然后直接在命令行中输入gem install sass按回车键确认，等待一段时间就会提示你sass安装成功。如果要安装beta版本的，可以在命令行中输入gem install sass --pre你还可以从sass的Git repository来安装，git的命令行为git clone git://github.com/nex3/sass.git cd sass rake install如果上述的办法你尝试失败了，那说明要么被你的网络墙了这个，要么你的网络信号不好。你可以尝试本地安装，不过有点复杂。这里暴漏个惊天秘密，那就是koala这个编译工具已经内置了sass，所以如果你安装了koala，就根本不需要安装sass，注意ruby还是得安装。关于koala请参阅编译工具。

linux下ruby编程环境的安装和配置，方法如下：1、去ruby官方下载安装包，下载地址：http://www.ruby-lang.org/en/downloads/2、解压缩下载的ruby-1.9-stable.tar.gz安装包，进入目录。su #./configure -prefix=/usr/local/ruby-1.9#make#make install此时可能出现的错误：echo executable host ruby is required. use --with-baseruby option.;false ./tool/generic_erb.rb -c -o known_errors.inc./template/known_errors.inc.tmpl ./defs/known_errors.defexecutable host ruby is required. use --with-baseruby option.make: *** [known_errors.inc] Error 1出现此问题的原因在于1.9版本的ruby编译需要系统默认安装旧版本的ruby，而ubuntu中默认没有安装。3、解决方法：sudo apt-get install ruby#默认ubuntu10.10会自行安装ruby 1.8，之后再编译1.9就没问题了。下载1.8.7版本源码编译安装，并设置临时环境变量 ，进入1.8源码目录su#./configure -prefix=/usr/local/ruby-1.8#make && make installexport PATH=/usr/local/ruby-1.8/bin:$PATH#此时使用ruby -v验证版本为1.84、在刚才安装配置ruby1.8的终端中继续重新进行1.9的编译安装，进入1.9源码目录： #解压文件 tar vfxz ruby-1.9.1-p0.tar.gz #进入解压后的文件夹 cd ruby-1.9.1-p0/ #编译源码,编译之前,应该先对/usr/local/ruby-1.9.1文件夹设置权限. ./configure --prefix=/usr/local/ruby-1.9.1 #大名鼎鼎的 make 和 install make && make install #设置PATH路径,把安装的ruby放在系统PATH前面，避免调用操作系统自带的ruby export PATH=/usr/local/ruby-1.9.1/bin:$PATH #在 ~/.profile 文件中增加了这样的代码: if [ -d "/usr/local/ruby-1.9.1/bin" ] ; then PATH="/usr/local/ruby-1.9.1/bin:$PATH" fi 然后 注销 再登陆一次. #如无意外 ruby -v #ruby 1.9.1p0 (2009-01-30 revision 21907) [i686-linux] #ruby 1.9.1安装成功了.注意：之前安装了1.8版本ruby，可以直接通过rm -rf /usr/local/ruby-1.8删除即可。

Ruby安装由于sass依赖于ruby环境，所以在安装sass之前必须安装ruby。可以去官网下载一个。网络环境不好的，可以用我提供的这个文件：点击下载安装完成后可以在开始菜单找到ruby命令行，打开输入ruby -v查看版本号，出现版本信息则安装成功clipboard.png-6.6kBQQ截图20160917210342.png-1.6kBSass安装安装完ruby后，可以直接在命令行里面输入gem install sass安装Sass，不过由于墙的厉害，建议使用淘宝的ruby源来安装，步骤如下：gem sources --remove https://rubygems.org/ https://rubygems.org/ removed from sourcesgem sources -a https://ruby.taobao.org/ https://ruby.taobao.org/ added to sources这一步有可能会出错，windows下证书无法验证。解决方法：下载证书（右键另存为即可），放到ruby安装目录下，然后再设置环境变量SSL_CERT_FILE为该文件路径，再重新输入该命令QQ截图20160917211759.png-8.6kBgem source -l *** CURRENT SOURCES *** https://ruby.taobao.org/gem install sass Fetching: sass-3.4.13.gem (100%) Successfully installed sass-3.4.13 Parsing documentation for sass-3.4.13 Installing ri documentation for sass-3.4.13 Done installing documentation for sass after 12 seconds 1 gem installed //如果你在安装时出现如下提示，则表明网络不佳或源没有切换到 ruby.taobao.org ERROR: Could not find a valid gem "sass" (>= 0), here is why: Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed ( https://api.rubygems.org/latest_specs.4.8.gz)sass -v Sass 3.4.13 (Selective Steve)到此，所有的安装都结束了。接下来我们就可以直接编译sass文件了Sass编译打开ruby命令行，切换到scss文件所在目录，执行sass style.scss style.css,就可以将style.scss文件编译成style.css文件

我觉得 less 或者 sass 其中一款还是有必要的 很多css框架还是用它们来开发的 一些变量函数 的特性还是有助于提高效率的 CoffeeScript我就觉得没有必要 CoffeeScript是一套JavaScript的转译语言

　　ruby安装　　因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个ruby　　在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境　　sass安装　　如果你喜欢偷懒，或者你公司网络限制比较多，请直接看最后一段　　安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby　　然后直接在命令行中输入　　gem install sass　　按回车键确认，等待一段时间就会提示你sass安装成功。　　如果要安装beta版本的，可以在命令行中输入　　gem install sass --pre　　你还可以从sass的Git repository来安装，git的命令行为　　git clone git://github.com/nex3/sass.git cd sass rake install　　如果上述的办法你尝试失败了，那说明要么被你的网络墙了这个，要么你的网络信号不好。你可以尝试本地安装，不过有点复杂。这里暴漏个惊天秘密，那就是koala这个编译工具已经内置了sass，所以如果你安装了koala，就根本不需要安装sass，注意ruby还是得安装。关于koala请参阅编译工具。

安装node-sass的时候会报该错误： Error: Can"t find Python executable "python", you can set the PYTHON env variable. 有如下方法： 这里有一篇文章介绍了如何在Windows上找不到Python可执行文件"python"： https://catalin.me/how-to-fix-node-js-gyp-err-cant-find-python-executable-python-on-windows/ node-sass正常安装不成功几率占60%左右，但是通过以上两种方法解决问题，就不需要去改变环境变量等。 npm切换源具体请看： npm切换源之nrm 源管理工具

首先不能使用node-16以上版本，卸载node16安装node12 安装python2.7，我没有安装这个而是在网上查询安装了npm install --global --production windows-build-tools 安装这个tools的时候报错了改了一下npm的镜像，然后卡在了一个地方没法动弹。不过阴差阳错也装好了python2.7 安装node12后就可以npm i了这里不能使用淘宝镜像不然会报错node-sass没法安装的 npm config list查看配置 其中prefix和cache需要配置，关系到全局安装的包的位置。如安装了yarn就是安装到这个位置，需要配置环境变量：系统变量NODE_PATH：node_global地址，用户变量Path：npm地址修改为node_global地址

CSS 的预处理程序优缺点如下：LESS/SASS优点：开发速度提升；代码优化效率提高（对开发者而言）；代码更通俗易懂（对开发者而言）；维护简单便捷；代码更干净，优美；功能更多更强，CSS做出JS的特效（其实就是JS）；总而言之，LESS/SASS就是CSS里面的jQuery，简化，减少开发时间，提升开发者开发体验。LESS/SASS缺点：舍弃用户体验来提高开发的效率，可以查考Bootstrap的缺点；舍弃网页打开速度换取开发效率提升；需要一个学习的过程，用之不当反而弄巧反拙；总而言之，LESS/SASS缺点就是需要多一个编译器来重新编译一次CSS代码，也就是给浏览器多了一道工序，网页显示的速度会减慢（网页显示顺序，从上至下，一般CSS放在头部，先HTML DOM元素-->CSS-->脚本文件-->页面元素如图片，视频，音频--->最后完全显示）你在CSS工序加了一个步骤，速度自然慢，时间自然多了。

css中$后加名字和值指的是变量的值为什么，比如变量hellowBoxSize的值为3em。这是less，sass这类Css预处理器的语法。

WeFlow - 一个基于 tmt-workflow 前端工作流的开发工具。 Koala - 预处理器语言图形编译工具，支持 Less、Sass、CoffeeScript、Compass framework 的即时编译。 CodeKit - 自动编译 Less、Sass、Stylus、CoffeeScript、Jade & Haml等文件。 PaintCode - 将设计转换成 Objective-C, Swift 或 C# 代码。 Hosts.prefpane - 编辑 hosts 文件的工具。 iHosts - 唯一上架 Mac App Store 的 /etc/hosts 编辑神器。 Integrity - 轻松找到无效链接。 SwitchHosts - 一个管理、切换多个 hosts 方案的工具。 Gas Mask - 编辑 hosts 文件的工具，更简单方便。 DiffMerge - 可视化的文件比较（也可进行目录比较）与合并工具。 Gemini - 智能的重复文件查找器。 Hex Fiend - 快速而聪明的开源十六进制编辑器。 BetterRename - 一款强大的批量重命名工具，可以通过搜索功能改名。 PPRows - 计算你写了多少行代码。 SCM Breeze - 用于增强与git交互的shell脚本集(用于bash和zsh)。 Beyond Compare - 对比两个文件夹或者文件，并将差异以颜色标示。 Cacher - 基于云的团队代码片段管理器，具有Gist同步，VSCode/Atom/Sublime软件包和Mac/Windows/Linux/Web客户端。 Kaleidoscope - 一款很强大的文本文件和图像比较工具，同时和 git、svn 等版本控制工具能够完美的结合。 Fanvas - 把 swf 转为 HTML5 canvas 动画的系统。 EnvPane - 图形终端查看环境变量的应用工具。 Dash - 强大到你无法想象的 API 离线文档软件。 SnippetsLab - 管理和组织你的代码片段。 StarUML - 强大的软件建模软件。 Vagrant Manager - 管理你本地服务。 FinderGo Finder 中快速打开终端，定位到目录 Localname - 提供对本地开发服务器的访问权限。 zeplin - 前端与设计协同工作专用工具。 Go2Shell - 从 Finder 打开命令行。 SecureCRT - 一款支持 SSH、Telnet 等多种协议的终端仿真程序。 MJML - 简化设计回应电子邮件的方式。 TeXstudio - 集成创建 LaTeX 文档的写作环境。 Vagrant - 用来构建虚拟开发环境的工具。 LaunchRocket - 在 Mac 系统偏好设置中创建服务管理。 Swiftify - Xcode ＆ Finder 扩展 Objective-C 转 Swift 代码转换器 Woodpecker - 在Mac上查看、编辑iOS App的沙盒文件, UserDefaults, Keychain项

如题：div+css中让每一行都缩进2个字符；1、实验：找一个html编辑软件这里用DW编辑器：建立一个新的html文件2、为了让页面更好的体验出效果来，这里建立两个p标签，并且给每一个p标签都引入一个css样式；讲解：因为是文字缩进两个字符，所以用p标签比较规范一点，设置两个p标签的区域宽度与高度都为200px；然后为了区分他们，设置了两个p标签区域不同的背景颜色3、查看页面效果；如下图：由上图所示得出结果：p标签中的txt1样式设置的是段落首行缩进两个字符标签属性：text-indent:2em;而p标签中txt2样式设置的则是每一行都缩进两个字符，标签属性：padding-left:2em;

这里整理了一份web前端学习路线的思维导图，需要掌握和学习的内容如下：第一阶段：专业核心基础阶段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术，动画、弹性盒模型设计。5.熟练完成移动端页面的设计。6.熟练运用所学知识仿制任意Web网站。7.能综合运用所学知识完成网页设计实战。知识点：1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用less、sass完成项目开发，深入了解BootStrap。4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。第二阶段：Web后台技术阶段目标:1.了解JavaScript的发展历史、掌握Node环境搭建及npm使用。2.熟练掌握JavaScript的基本数据类型和变量的概念。3.熟练掌握JavaScript中的运算符使用。4.深入理解分之结构语句和循环语句。5.熟练使用数组来完成各种练习。6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。7.DOM和BOM实战练习和H5新特性和协议的学习。知识点：1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。第三阶段：数据库和框架实战阶段目标：1.综合运用Web前端技术进行页面布局与美化。2.综合运用Web前端开发框架进行Web系统开发。3.熟练掌握Mysql、Mongodb数据库的发开。4.熟练掌握vue.js、webpack、elementui等前端框技术。5.熟练运用Node.js开发后台应用程序。6.对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。知识点：1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。第四阶段：移动端和微信实战阶段目标：1.熟练掌握React.js框架，熟练使用React.js完成开发。2.掌握移动端开发原理，理解原生开发和混合开发。3.熟练使用react-native和Flutter框架完成移动端开发。4.掌握微信小程序以及了解支付宝小程序的开发。5.完成大型电商项目开发。知识点：1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Rex基本概念。练使用react完成项目开发、掌握Rex中的异步解决方案Saga。2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js、TypeScript。

前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用Html、CSS、JavaScript等专业技术和工具将UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。实际上前端工程师核心的技能一直都是Html、CSS和JavaScript，今天小编给大家整理了这三部分需要掌握的主要技术。一、HtmlHtml部分需要了解常用浏览器和浏览器内核;了解语义化的概念;掌握Html5语法及使用技巧;掌握Html5常用标签。掌握Html5新布局标签、多媒体标签等。二、CSSCSS部分的主要知识有掌握CSS语法及使用技巧;掌握DIV+CSS布局方式;掌握常见网页布局模式;掌握Photoshop切图以及插件切图;能够熟练使用开发人员工具进行页面调试;能够根据PSD文件独立完成静态页面的开发工作;掌握CSS32D、3D变换、动画效果;能够使用CSS3新属性美化修饰网页;了解移动端屏幕、移动端浏览器、操作系统的不同;掌握常用移动端调试方法;掌握常用移动端适配方法;掌握CSS预处理器less的使用;掌握常用移动端框架使用方法;掌握常见移动端页面开发;掌握响应式布局开发;掌握Bootstrap开发响应式页面;掌握适配不同终端的网页开发技术选型等。三、JavaScriptJavaScript是赋予页面交互效果时需要用到的技术，这个部分需要能够掌握JavaScript基本语法;掌握常见JavaScript算法;掌握DOM的各种操作;熟练使用面向对象思想进行DOM编程;掌握JavaScript的高级语法;掌握JavaScript常见兼容性方案;熟练使用jQuery操作DOM;熟练使用和编写jQuery案例等。以上是在Html、CSS和JavaScript方面Web前端人员需要掌握到的内容，除了这三个方向之外，一名优秀的Web开发工程师还需要熟练掌握各种前端框架的使用，以及一些当下热门技术，这些都是需要在平时的开发过程中不断积累学习的。

简介VSCode是微软出的一款轻量级代码编辑器，免费而且功能强大，对JavaScript和NodeJS的支持非常好，自带很多功能，例如代码格式化，代码智能提示补全、Emmet插件等。VSCode推荐一个项目以文件夹的方式打开。一、设置首选项下载安装完成后，打开编辑器，首先要设置主题、字体大小等。1. 设置主题文件→首选项→颜色主题2. 设置字体大小文件→首选项→设置，打开了一个setting.json文件，将左边的设置复制到右边进行覆盖生效，所有编辑器的设置都在这里修改。 二、Emmet插件最新版集成了Emmet 2.0，在文件→首选项→设置可以开启或者关闭功能 三、快捷键所有快捷键设置：文件→首选项→键盘快捷方式 1. 在当前行中间换行到下一行：ctrl+enter 2. 当光标点击到某一行时，默认选中全行，可以直接复制剪切 3. 直接删除某一行：shift+delete或者ctrl+shift+k 4. 多行光标选择：alt+鼠标左键 5. 自动生成html结构和meta声明：首先输入“!”，然后按tab键 6. 标签自动补全：tab键 7. 折叠所有代码：ctrl+k、ctrl+0 8. 拆分编辑器：ctrl+查找框右边的3个参数分别为：区分大小写，全字匹配，使用正则9. 跳转行号：ctrl+G 10. 添加函数注释：在函数上方输入“/**”，然后点击enter11. 格式化：alt+shift+f 12. 注释：ctrl+/ 13. 全部保存：ctrl+k, 然后只按s一个键 14. 向上移动一行：alt+↑ 15. 向下移动一行：alt+↓ 16. 向上复制一行：alt+shift+↑ 17. 向下复制一行：alt+shift+↓ 18. 查找：ctrl+F 19. 替换：ctrl+H 20. 文件中查找：ctrl+shift+f 可以在打开的文件夹中搜索所有文件内容 21. 文件中替换：ctrl+shift+h 22. 转到定义：F12 23. 转到实现：ctrl+F12 24. 打开文件夹：ctrl+k, ctrl+o 25. 关闭文件夹：ctrl+k, 然后单按一个f 26. 选中一段代码，通过“ctrl+[”可以左移，“ctrl+]”可以右移open in browser插件功能描述：从浏览器中查看html文件，使用系统的当前默认浏览器Atuo Rename Tag修改 html 标签，自动帮你完成尾部闭合标签的同步修改，不过有些bug。fileheader顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间Live Sass Compilervscode--搭建自动编译sass环境一，安装插件及使用步骤1、vscode安装Live Sass Compiler，由于该插件依赖Live Server ，所以会自动安装Live Server2、点击vscode底部的Watch my Sass3、按F1键，在输入栏中输入Live Sass: Watch Sass来监听Sass文件（ Live Sass: Stop Watching Sass 停止监听文件）4、同样在输入栏中输入 Live Sass: Compile Sass - Without Watch Mode，就会自动编译scss文件为css文件二，配置编译规则1、在项目的根目录下创建一个文件夹，命名为 .vscode(只能通过Linux命令创建)，并且在该文件夹下面创建一个文件settings.json2、配置settings.json1 {2 "liveSassCompile.settings.savePath": "./dist/css",//指定编译完的css文件路径3 "liveSassCompile.settings.format": "expanded",//指定编译css的样式类型，有这四种 expanded（默认）, compact, compressed or nested4 "liveSassCompile.settings.extensionName": ".css",//指定编译完的文件后缀名，.css为普通代码，.min.css为压缩代码5 "liveSassCompile.settings.excludeFolders": [6 "**/node_modules/**",//指定忽略的文件7 ".vscode/**"8 ]9 }三、其他注意事项如果要对多个文件进行监听和编译，那么只要重复操作一，安装插件及使用步骤》的2/3/4步骤。（每个scss文件只要操作一次，以后一旦保存，就会自动编译）Easy Sass安装 Ruby 时一定要勾选 Add Ruby executables to your PATH，用来将 Ruby 添加到系统变量，这样后续可以省却很多不必要的麻烦。装好后在命令行输入 gem sass 来安装 Sass，安装完成后启动 VSCode，在拓展商店里搜索“easy sass”，并安装，安装成功后重启 VSCode。接下来进行配置。在 VSCode 菜单栏依次点击“文件 首选项 设置”，打开 settings.json 全局配置文件。搜索“easysass”，然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中，再根据实际情况修改配置项。一般生产环境中用到其中两个设置项（上图红框处中的代码）：/** Easy Sass 插件 **/"easysass.formats": [{"format": "compressed", // 压缩"extension": ".css"}],"easysass.targetDir": "./" // 自定义css输出文件路径12345678其中 easysass.formats 是设置编译输出的 css 风格的，可以同时编译输出多个不同风格的 CSS 文件，此处我只设置了一个 easysass.formats 项目，所以编译时只生成一个 CSS 文件。easysass.formats[i].format 支持四个选项用以编译生成对应风格的 CSS：nested：嵌套缩进的 css 代码。expanded：没有缩进的、扩展的css代码。compact：简洁格式的 css 代码。compressed：压缩后的 css 代码。easysass.formats[i].extension 顾名思义就是设置编译输出的文件名了，此处可以自定义文件名，输出的 CSS 文件名会按照“当前 Sass 文件名（不含拓展名）+此处自定义文件名”的格式来生成。例如：设置 easysass.formats[i].extension 为 ".min.css"，假设当前的 Sass 文件名为“style.scss”，则编译输出的 CSS 文件名为“style.min.css”。我们的生产环境中，在很多情况下 Sass 文件和 CSS 文件是不在同一个目录下的，而Easy Sass 默认输出的 CSS 是和当前 Sass 文件处于相同目录的，为此我们需要配置输出路径

您好，对于你的遇到的问题，我很高兴能为你提供帮助，我之前也遇到过哟，以下是我的个人看法，希望能帮助到你，若有错误，还望见谅！。sass和less主要区别在于实现方式: less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。一、less：Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。二、sass 与 less 的区别 ：1、sass与less的安装 ：sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。less 在服务器端最容易的安装方式就是通过 npm（node.js 的包管理器）。less 在客户端使用【.less】（LESS源文件），只需要在官网载一个javascript脚本文件主【less.js】，然后在我们需要引入LESS源文件的html的中加入如下代码： 2、变量 ：sass 是以开头定义的变量，如：mainColor: #963; less 是以@开头定义的变量，如 @mainColor: #963; 3、作用域 ：sass 没有全局变量，满足就近原则，但是实际中可以将需要定义的全局属性放在base.scss 文件中。注意变量名重复； less 中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在LESS下所起的变化。非常感谢您的耐心观看，如有帮助请采纳，祝生活愉快！谢谢！

均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性；Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系；Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念；Scss和Stylus就具有类似其它语言的条件语句、循环语句等，而LESS需要通过When等关键词模拟这些功能；Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；使用LESS时，还可以在引用它的HTML文件中引入从官网下载的“less.js”文件，就可以通过浏览器进行解析。

混合宏@mixin，即代码片断。类似JS的封装函数，可以通过@include在需要的地方引入。

$ 符号 被 Sass 占用 @ 符号 被 less 占用 因此CSS中采用了 -- JS: 可以看到var只是个声明变量的关键字，color才是变量名。 PHP: Scss: CSS在使用变量的时候用到了一个函数叫var()： CSS: 创建个支持vue3的vite项目 进入到该文件夹 安装依赖 创建一个组件 使用中文引入变量 参考： Vue 超好玩的新特性：在 CSS 中使用 JS 变量

最好不要把属性改为$变量

linux下ruby编程环境的安装和配置，方法如下：1、去ruby官方下载安装包，下载地址：2、解压缩下载的ruby-1.9-stable.tar.gz安装包，进入目录。su #./configure -prefix=/usr/local/ruby-1.9#make#make install此时可能出现的错误：echo executable host ruby is required. use --with-baseruby option.;false ./tool/generic_erb.rb -c -o known_errors.inc./template/known_errors.inc.tmpl ./defs/known_errors.defexecutable host ruby is required. use --with-baseruby option.make: *** [known_errors.inc] Error 1出现此问题的原因在于1.9版本的ruby编译需要系统默认安装旧版本的ruby，而ubuntu中默认没有安装。3、解决方法：sudo apt-get install ruby#默认ubuntu10.10会自行安装ruby 1.8，之后再编译1.9就没问题了。下载1.8.7版本源码编译安装，并设置临时环境变量 ，进入1.8源码目录su#./configure -prefix=/usr/local/ruby-1.8#make && make installexport PATH=/usr/local/ruby-1.8/bin:$PATH#此时使用ruby -v验证版本为1.84、在刚才安装配置ruby1.8的终端中继续重新进行1.9的编译安装，进入1.9源码目录：#解压文件tar vfxz ruby-1.9.1-p0.tar.gz#进入解压后的文件夹cd ruby-1.9.1-p0/#编译源码,编译之前,应该先对/usr/local/ruby-1.9.1文件夹设置权限../configure --prefix=/usr/local/ruby-1.9.1#大名鼎鼎的 make 和 installmake && make install#设置PATH路径,把安装的ruby放在系统PATH前面，避免调用操作系统自带的rubyexport PATH=/usr/local/ruby-1.9.1/bin:$PATH#在 ~/.profile 文件中增加了这样的代码:if [ -d "/usr/local/ruby-1.9.1/bin" ] ; thenPATH="/usr/local/ruby-1.9.1/bin:$PATH"fi然后 注销 再登陆一次.#如无意外ruby -v#ruby 1.9.1p0 (2009-01-30 revision 21907) [i686-linux]#ruby 1.9.1安装成功了.注意：之前安装了1.8版本ruby，可以直接通过rm -rf /usr/local/ruby-1.8删除即可。

webStorm 配置sass ,安装ruby 及实现编译scss文件 1、首先从 官网下载ruby2、安装 过程中安装成功后，查看版本信息ruby -vgem -v3、 安装Sass ，安装完后，会在 C:Ruby23in 多出如下文件gem install sass4、Webstorm里添加Watcher 工具栏--File ---打开Settings下的 -----Tools ---【File Watchers】右边栏的 "+" 选择 SCSSProgram: C:Ruby23inscss.batArguments--no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.cssOutput paths to refresh$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.mapEnvironment variablesC:/Ruby23/binps、 注意，如果文件路径有修改如：未修改： C:Ruby23-x64in 修改后： C:Ruby23in 这几个地方要统一：之前是 Ruby23-x64 ------>改后： Ruby23环境变量也需要改动。。。。。。。。。。。所以。。最好使用默认名称。编译后前后CSS

三种CSS 预处理器（框架）SASS2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。LESS2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。LESS & SassLESS是受Sass启发而开发的工具，它列出了如下开发的理由：“为什么要开发一个Sass的替代品呢？原因很简单：首先是语法。Sass的一个关键特性是缩进式的语法，这种语法可以产生柱式外观的代码。但是你需要花费时间学习一门新的语法以及重新构建你现在的样式表。LESS给CSS带来了很多特性，使得LESS能够和CSS无缝地紧密结合在一起。因此，你可以平滑地由CSS迁移到LESS，如果你只是对使用变量或者操作感兴趣的话，你不需要学习一整门全新的语言。”StylusStylus相对前两者较新，可以看官方文档介绍的功能。1.来自NodeJS社区，所以和NodeJS走得很近，与JavaScript联系非常紧密。还有专门JavaScript API2.支持Ruby之类等等框架3.更多更强大的支持和功能总结：Sass看起来在提供的特性上占有优势，但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS，而不需要像Sass那样需要将CSS文件转换成Sass格式。Stylus功能上更为强壮，和js联系更加紧密。

首先我们先分享一下源码：https://github.com/kunfan96/vue-admin对于我这种刚开始用Vue做项目的菜鸟来说在组件数据定义方面犯了很多错误,尤其是在这个页面在进行数据回选的时候自己重定义已经定好的数据,导致数据非常杂乱无章,具体在storeDetail.vue的14--321行,感觉这么多数据非常有必要的进行裁剪,用js进行运算把数据补充完整,这里相对把后台的任务减轻了很多,只是额外增加前端渲染数据的量父子组件数据通讯问题刚开始写Modal的时候对于Modal的开关modal父子组件共享的数据,然后在关闭的时候子组件改变了父组件传递的数据会报错,也就是props的值在这里有2个解决方案,一个是用vuex共享Modal的开关(写起来有点绕,代码也不简洁),另外一个最好的方法是建立一个mixins文件夹,在mixins的js进行操作,关键代码--->mixins/closeModal.js--->this.$emit("on-cancel",false),子组件通过emit使父组件发生on-cancel,响应一个事件,这样写可以让其他多个子组件使用到Modal共用代码组件命名方式在这里我自己定义了文件夹采用了大驼峰命名法,例如文件夹Store,Shop,对于文件以及变量的命名采用小驼峰命名法,如果storeDetail.vue,parcelList.vue多用flex2018年flex将会是主流,兼容性问题也没必要理睬,还有多注意grind布局,可能也有流行了多用懒加载使用懒加载方便在低带宽时候能够带来更好的用户体验,在参考iview admin代码我把懒加载的用法统一为{ path:"/parcel-list", meta:{ group:"parcel", item:"parcel-list" }, component: resolve =>import("@/pages/Parcel/parcelList") } 侧边栏刷新问题在这里要注意到组件给了2个绑定的变量active-name,open-names,这里我们在路由设置的时候添加meta:{ group:"", item:"" } 通过this.$route.meta.group,this.$route.meta.item就可以与active-name,open-names进行匹配实现无刷新操作记得多npm run buildiview这个组件有点问题,有时候就是修改Modal的样式我明明在style(不带scoped)标签修改之后npm run dev样式修改成功,可是build之后样式就又重新恢复,后来把样式放在静态文件夹中才可以修改成功,还有就是表格居中build之后之后不能居中,总之,多build问题早点发现早点解决是好事(切莫佛系~~~)Echarts在VUE的使用在这里有个坑,在echarts实例化的时候在chart.vue有段代码<div :id="chart.id"></div> let myChart=this.$echarts.init(document.getElementById(this.chart.id)) 在这里注意到有个id,我在这里之所以这样做,把组件的id设为变量主要是echarts官网文档写到在网页中echarts实例化的div的id具有唯一性,由于我这个chars组件需要多次被被同一组件调用多次所以是只能将id设为一个变量(这个真的坑,调了很多次上官方文档看了好几次才知道...).另外最好把把echars的数据封装一遍多写公用组件框架这种东西本质就是减少代码,公用组件写好了调用的时候使用数据渲染就可以了,这样就能大大减少代码量,也符合MVVM的思想您可能感兴趣的文章:vue+iview写个弹框的示例代码基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)浅谈vue的iview列表table render函数设置DOM属性值的方法使用vue + less 实现简单换肤功能的示例浅谈vue引入css,less遇到的坑和解决方法vue的无缝滚动组件vue-seamless-scroll实例Vue2.0设置全局样式(less/sass和css)详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写cssvue-cli构建项目使用 less的方法Vue项目中引入外部文件的方法（css、js、less）vue-cli如何添加less 以及sassvuejs如何配置lessVueJS如何引入css或者less文件的一些坑

前端需要学习的内容很多，涵盖较多方面，大致可以分为以下几个阶段。一、初级阶段：前端初体验，感受视觉冲击，提升学习兴趣，打消学习疑虑PS入门（前端UI协同工具蓝湖与标你妹工具使用)HTML5，cSS3(大量CSS3网页特效制作)移动端布局基础(媒体查询、页面适配)，响应式页面布局。二、中级阶段：夯实基础，打通任督二脉，杜绝做一个API的搬运工JS入门，DOM操作，BOM，H5常用新API，Jquery之DOM操作，Ajax ;JS高阶，面向对象(OOP)，原型、原型链，执行上下文栈，作用域、作用域链，This，闭包，ES6/ES7.Jquery页面特效+插件封装;服务器知识Node.js (Express4) , MongoDB(mongoose)/Mysql. Websocket.三、高级阶段：通往前端实战之路，时下最新开发框架与使用技巧，杜绝过时技术炒剩饭Vue全家桶(Vue2.x+Vue-Router3.x+Vuex3.x+ElementUl2.x+Axios0.9)React全家桶(React16.x+React-Route-Dom5.x+Redux4.x+React-Redux+Redux-Thunk)微信小程序（登录态+微信支付)Webpack4.x

这样用还是不行的，如果你想用变量的话，需要转为另外一种语言动态编写css，less或者sass，这两种属于css的进阶版哦！

1、在项目中下载安装插件less。2、暴露配置文件。3、配置webpack.config.js文件，在项目中找到匹配loade的正则表达式，按照css的样子添加less。4、在已知的项目中，找到之前设置好的sass，通过配置less找到sass所在位置，在其下方将less配置React。5、通过添加代码可以完成配置，重启生效。

1.安装完node之后 在node目录下创建两个文件夹 通过cmd 命令行分别执行如下： 2.在“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量” 3.确定完之后 在cmd 里执行 使用cnpm 代替 npm 虽然提示不适合Windows，但是问题好像是sass loader出问题的。所以只要执行下面命令即可； 一般只要执行方案一就够了。 然后再运行,OK

　　客路青山外，行舟绿水前。潮平两岸阔，风正一帆悬。海日生残夜，江春人旧年。乡书何处达，归雁洛阳边。下面我为大家带来关于难忘的故乡情的作文，大家一起来阅读吧! 　　篇一：难忘的故乡情作文 　　缅怀似水流年，转眼间，我离开故乡已有5年之久，但我却时常思念着它，因为它是我的根，是孕育我成长的地方，我永远不会忘记它。 　　今日，我终于要回到了这里了。但心中却有着一股莫名的苦涩，却不知为何。大概是由于长时间没回来了吧。 　　车轮滚滚，带着浓浓的情，穿山越岭，我回来了。倏而，我看见了那个熟悉的山头。那不是故乡的山头吗?是，是故乡的山头。我似乎有些激动，不i我确乎有些激动。在车拐弯的那一瞬间，我发现了一个白发苍苍的老人站在一旁焦急地等待着，她是谁?她是我的奶奶吗?我踌躇了会儿，车近了，我也看清楚了，是我的奶奶i车停稳了，我奔下车，和奶奶紧紧地拥抱在一起，那是的心情真是无以言表u2026u2026 　　经过几分中的步行，终于到家了，但故乡的荒凉却让我心酸：低矮的房子，贫瘠的土地，还有一群老顽固u2026u2026总之，故乡的现况令我很失望。 　　故乡的前景时时困扰着我，我不知到我能为故乡做些什么?我长大后又能为家乡做什么?u2026u2026 　　沉积的伤痛一个凛冽的冬天，您，我的爷爷，带着满身的伤痛离开人世。临终时，你的脸上现出难以忍受的痛苦，是那样无助，那样令人感到怜悯u2026u2026 　　你雷同一辆载满苍桑岁月的三轮车，在最后一次远航后，悄然离我而去了。落日的余辉照着你那安详的面庞和一湛蓝的海水，在广翰无边的海面上漫无目的地飘流着，直至你被大自然所风化，从此消泯殆尽。 　　曾几何时，你在那狭小的院落里教会了我1+1等于2的时候，你是多么开怀，多么欣慰啊，当我小心翼翼地点燃你那大烟时，你又多么骄傲啊。 　　时光如流水一般逝去，不管我怎样追赶，都无济于事。我感到局促与茫然，甚至还感到彷徨，感到恐惧，心中也涌上一股莫名的悲伤。我拼尽全身力气，使劲追溯着我俩那如诗的光阴，可我还是淡忘了，最终被那精彩的年华深深的埋没了，就连那昔日我记得请清楚楚的脸庞，也在我的脑海中随风而逝了，你，仿佛从我的人生中怆然离去了，永远，永远。 　　偶然的一日，我来到你永眠的地方，在这里，我仰望青天，俯瞰大地，欲歌无词，欲哭无泪，心中流淌着思念的折磨u2026u2026 　　我来到那狭小的院落，努力地寻觅着残留在这里的记忆。蓦地，我发现了那个大烟杆儿，它静静的伫立在那个角落，我似乎看到我偎依在您的身旁，您给我讲着动听的故事u2026u2026 　　篇二：难忘的故乡情作文 　　人人都说家乡美，最美莫过家乡情。尽管，我在人生崎岖的小道上匆匆赶路，在生命的茫茫大海中奋然远航，但是，从家乡那边飘来一缕纤云，飞来一只春燕，燃起一团晚霞，升起一弯新月，都会在我的心河里轻轻地荡出一支缠缠绵绵的思乡曲。 　　在记忆的长河中，我的家乡很美。那一望无际的七彩原野，那美丽如画的田园风光，那村头的砖桥古滩，村内成荫的绿树，村外叠翠的杨柳，流霞的桃园，以及村姑那银铃般的欢声笑语，都令我留恋忘返。 　　我的家乡座落在美丽而古老的废黄河两岸。说她美，她从遥远的西北姗姗而来，又轻盈地将长裙一摆迤逦南下，继而伸开她的臂腕把家乡温情地拢在她的怀抱中。听老人们说这河曾是大宋开国皇帝赵匡胤的运粮河，当年还真的有过“帆樯相连，百舸争流”的恢宏气势哩：前几年从这里挖出一只明代的大木船，就是一个明明白白的例证。也就是因为有了这条大河的缘故吧，我的家乡才有了茂盛的芦苇坡和蒲草滩，才有了家乡的这座大集镇，才有了一代勤劳、朴实的家乡人。 　　我爱家乡的早晨。爱那红彤彤的“太阳神”，她给家乡涂上了一层橘红;爱那天边怒放的朝霞，那里有织女的一片真爱;更爱那缕缕清风，她给了我不竭的生命活力。 　　我爱家乡的黄昏。爱那绚丽的夕阳余晖，晚霞暮霭，那姗姗来迟的夜色里蕴藏着几多神秘啊，让人总也猜不透、读不懂! 　　啊!家乡的土地，家乡的大河，永久留在我的人生记忆里。我愿化作一朵白云，飞向生我养我的故乡;我愿变成一条清溪，一直奔流到故乡的心田，因为那是我生命的起点，成长的摇篮，青春的寄托，灵魂的皈依哟u2026u2026 　　篇三：难忘的故乡情作文 　　我的家乡，有着悠久的历史和丰富的自然人文资源。我为我的家乡感到自豪，我对她有着一往深情。家乡的雨家乡的风，家乡的点点滴滴，总是在我的记忆力里，触到我的心里u2026u2026王勃的“长江悲已滞，万里念将归。”情浓意切的精美诗句，让人感到了他对家乡的感情。古人与我们一样，走远了回想起自己的"家乡。还有那“人言落日是天涯，忘记天涯不见家。”的切切乡恋。再美好的地方，永远比不上我们的家乡。 　　家乡，温暖的代名词。她像一个母亲哺育着我，她也是我成长的摇篮。是走到哪也忘不了的地方，是抛不开的回忆。爱她，就像爱自己的亲人一样。偶尔离开家乡，也觉得外面的世界很精彩。走在繁华的大街上，总有一些失落。无论外面的世界是多么美好，多么精彩，感觉都不属于自己。家乡，也只有她，才让我感到亲切，。一切都是那样的熟悉。家乡的人和事，时时刻刻吸引着我。没有华丽的词汇，但却有朴实的语言，能深入人心，感人肺腑。家乡吸引我们，不光是因为她的魅力，更是她的真情。从小的感情，一点点凝聚起来到现在，让人无法忘怀。那种爱，是说不清的。多情好似家乡月，道是无亦动人。 　　“美不美，家乡水。亲不亲，故乡人。”“老乡见老乡，两眼泪汪汪。”这些语句，都说明了我们对故乡的深厚感情。善良好客，邻里和睦。构成一幅其乐融融的精美画面。他们帮助过很多人。他们纯真的笑容，永远印在我的脑海中，他们不斤斤计较。他们在我有困难时帮助了我温暖人的心灵。 　　家乡是一个和蔼的母亲，在这几年中翻天覆地的变化，让人难以相信。不过她还是让我想起我的童年，看到了温馨时刻。家乡，永远伴随着我。在我学习中，在我生命里，在我生活中。她是必不可少，不可磨灭的记忆。 　　抬头望月，总能想起以前的点点滴滴，感慨万千。就像李白的：“举头望明月，低头思故乡。”家乡的月，那么美，那么多情，勾起人对故乡的思念之情。家乡的一切，都仿佛月儿一般。 　　我爱我的家乡，她时刻在我身边。我为我的家乡自豪，她风景优美，有着悠久历史，她还给我温暖，让我在这家乡的爱继续前进!

宁静的夜晚星光璀璨。今夜的星光如此美丽，我舍不得移开视线。这部电影演员阵容强大，可谓星光灿烂。有满月的天空不会有星光。星光像从天堂溢出，神秘而安祥。古今多少文人骚客吟咏过月亮，可我独爱沉默的星光。黑暗中的点点星光照亮了他的归途。美酒，知己，星光，人生有这三友作伴，夫复何求。眼中的星光虽然明亮，但却比不上我心中的理想。温柔的星光总让我想念远方的故乡。

对于故乡的理解，最早是词典中“自己生长的地方或祖籍”。然而读过季羡林的《月是故乡明》，茅盾的《可爱的故乡》诸文后，我才了解：故乡的含义不仅如此。浅黛色微光交错编织着乡人的残梦，微风和呼吸同一节奏。旭日的温度点燃了朝霞的絮裙，灼烧了自己，爽风毫无羁绊，在对乡人耳语些什么，涟漪被推开如翩舞的发丝毫无秩序。眼帘的开启伴随着睡意的辞去。是推不走阳光热情的邀请?是风，水打破了和谐的韵律?乡人，终是醒了。阡陌仄径上乡人往来，踏着辛勤劳作的道路，忙碌的一天开始。顺着乡人的脚步：它每一次落地的脚印都被一次次的重踏遮盖。此刻是一番熙熙攘攘的景象。已是归来时。那是蹚着汗水，穿过夕影的乡人，于是看到他们淋漓的大汗，疲倦的身影也不为怪了。桌前等待他们的是亲爱的家人，劳累顿时樟脑般升华，然后是茶余饭后的闲谈。月色浸着清凉，如水般轻轻拂过肌肤，沁脾入骨的凉。乡人却热火朝天地继续未完的议论，直到深夜柔美的月光抚弄起沉睡的古琴。翌日清晨又展开了熟悉而又陌生的情节……故乡？故乡!不必提及高低的楼舍，翠艳的草花，我的心不必含盖；不必提及淅沥的小雨，天空的阴霾，我的心不需顾及；不必提及繁荣的经济，闻名的胜地，我的心不曾在乎；不必提及过去的辉煌，将来的发展，我的心不会看到。我所见到的，听到的，感受到的只要是“质朴”。我只愿记住它，有它，我心中的故乡才会是我真正的故乡!渐渐地，真实的和心仪的，它们相互溶入，相互结合……我看到了我的故乡!

星空的网络解释是：星空（几米著绘本）《星空》是2009年现代出版社出版的图书，作者是几米。《星空》，是风靡华人世界的畅销绘本画家几米2009年最新力作。描述了一个关于长大的故事：有个不爱说话的少女，认识了一个不爱说话的少年，他们都不是最快乐的孩子。有一天，他们逃离城市，翻山越岭，来到少女的爷爷曾经住过的山中小屋。在山里的夜晚，他们看到了最美丽的星空。后来，少女病了，而少年不知去向他们究竟经历了什么，才能走出心理的阴影呢？星空（汉语词语）星空是汉语词语，拼音是xīngkōng，指有星光的天空。星空的网络解释是：星空（几米著绘本）《星空》是2009年现代出版社出版的图书，作者是几米。《星空》，是风靡华人世界的畅销绘本画家几米2009年最新力作。描述了一个关于长大的故事：有个不爱说话的少女，认识了一个不爱说话的少年，他们都不是最快乐的孩子。有一天，他们逃离城市，翻山越岭，来到少女的爷爷曾经住过的山中小屋。在山里的夜晚，他们看到了最美丽的星空。后来，少女病了，而少年不知去向他们究竟经历了什么，才能走出心理的阴影呢？星空（汉语词语）星空是汉语词语，拼音是xīngkōng，指有星光的天空。注音是：ㄒ一ㄥㄎㄨㄥ。拼音是：xīngkōng。词性是：名词。结构是：星(上下结构)空(上下结构)。星空的具体解释是什么呢，我们通过以下几个方面为您介绍：一、词语解释【点此查看计划详细内容】星空xīngkōng。(1)缀满星星的夜空。二、引证解释⒈有星光的天空。引沙汀《困兽记》十八：“仿佛他们的心思，全被灿烂的星空吸引住了。”杨朔《潼关之夜》：“潼关的城墙和城楼衬映在星空之下，画出深黑色的轮廓。”冰心《走进人民大会堂》：“走进万人大礼堂好像凝立在夏夜的星空之下。”三、国语词典有星的夜空。如：「今晚的星空特别灿烂。」词语翻译英语starrysky,theheavens德语Sternenhimmel(S)_法语cielétoilé关于星空的近义词夜空苍穹高空天空关于星空的诗词《独携·独携酸泪注星空》《在哈尔盖仰望星空》《望星空》关于星空的诗句天上房星空不动在黑暗的河流上被你所遗落了的一切终于只能成为星空下被多少人静静诵着的你的昔日我的昨夜沙堡到了最后黑暗的浪潮总是会吞蚀尽我的每一种期待每一个梦想故事一旦开始再怎样曲折也只是在逐步走近结束的方向我当然明白所有美丽的呈现只是为了消失所有令我颤抖与焚烧的相见啊只是为了分别可是你不能禁止我在这海边用我仅有的时间来不断营造或者重温每一部分的细节当海洋逐渐升高迷航的船舶终于都在远方沉没我当然明白今夜之后我为你而留下的痕迹不会比一座沙堡更多美酒终于厌倦了这种把灵魂一层又一层包装起来的世界我要回去了列蒂齐亚下决心不再对生命提出任何的要求什么也不带走只留下孤独做为我款待自己最后的那一杯美酒雨中的山林云雾已逐渐掩进林中此去的长路上雨润烟浓所有属于我的都将一去不还只留下在回首时这满山深深浅浅的悲欢沧桑之后沧桑之后也许会有这样的回顾当你独自行走在人生的中途一切波涛都已被引进呆滞的河道山林交易星光逐渐熄灭只留下完全黑暗的天空而我也被变造成与起始向你飞奔而来的那一个生命全然不同你流泪恍然于时日的递减恍然于无论怎样天真狂野的心也终于会在缰绳之间裂成碎片沧桑之后也许会有这样的回顾请别再去追溯是谁先开始向命运屈服我只求你在那一刻里静静站立在黑暗中把我重新想起想我曾经怎样狂喜地向你飞奔而来带着我所有的盼望所有的依赖还有那生命中最早最早饱满如小白马般的快乐还有那失落了的山峦与草原那一夜桐花初放繁星满天幕落的原因在掌声最热烈的时候舞者悠然而止在似乎最不该结束的时候我决定谢幕也许也许有些什么可以留住那光灿和丰美的顶端了如果我能以背影遗弃了观众在他们终于遗弃了我之前我需要有足够的智慧来决定幕落的时间在黑暗的河流上读《越人歌》之后灯火灿烂是怎样美丽的夜晚你微笑前来缓缓指引我渡向彼岸当灯火逐盏熄灭歌声停歇在黑暗的河流上被你所遗落了的一切终于只能成为星空下被多少人静静传诵着的你的昔日我的昨夜附记：《越人歌》相传是中国第一首译诗恍如星空疏间密关于星空的成语买空卖空妙手空空卖空买空丧门星零零星星空对空空空如也星星之火空空洞洞空口说空话关于星空的造句1、中国人的足迹，从此印进寥廓而深邃的星空，当他们问候世界的时候，给未来留下了深远的回声。2、我们在星空下，轻摇_，慢划桨，以至乐而忘返。3、那时的美苏太空热一下子席卷全球，人们发射各种航天器到太空中去，写各种诗词语句画各种图画发射到太空中去，人们频繁地仰望星空，渴望着，等待着。4、闪烁的星空下，我拖着疲惫的身体向家走去。5、她望着闪烁的星空，沉浸在美丽的幻想之中。点此查看更多关于星空的详细信息

当我死亡的时候，他也会死啊!

形容夜空的词语有：星空万里、深邃、璀璨、静谧、无边无际、晴朗、星星点点、漆黑、星光灿烂、万籁俱寂、星月交辉、万籁无声、月明星稀、繁星点点、皓月当空。1、星空万里：[xīng kōng wàn lǐ]，天空中星星很多。造句：星空万里人飘渺，原野千山月冷寒。2、深邃：[shēn suì]，幽深。（多指景色或环境）。造句：深邃的夜空，星汉灿烂。3、璀璨：[cuǐcàn]，形容光彩夺目，非常绚丽。造句：璀璨的星光犹如一颗颗宝石镶嵌在空中。4、静谧：[jìng mì]，形容静寂无声或形容忧愁的模样。造句：我们来到这里，享受这静谧的夜空。5、无边无际：[wú biān wú jì]，形容范围极为广阔。造句：夜晚，星星在无边无际的夜空中神秘的闪烁。6、晴朗：[qíng lǎng]，天空中无云或云很少。造句：晴朗的夜空里，星光闪烁，我被这密密麻麻的繁星深深的陶醉了。7、星星点点：[xīng xīng diǎn diǎn] ，①形容多而分散。②形容少许或细碎。造句：数星星点点的火把在雾里闪耀着。8、漆黑：[qī hēi]，指极暗无亮光、颜色极黑或者形容受打击，心情低落。造句：漆黑的夜空好像人类的眼睛，黑色中带着光亮。9、星光灿烂：[xīng guāng càn làn]，星星发出的光很鲜亮夺目。造句：在这月色朦胧、星光灿烂的夜晚，他静静地思考着问题。10、万籁俱寂：[wàn lài jù jì]，形容周围环境非常安静，一点儿声响都没有。造句：万籁俱寂，除了从远处偶尔传来汽车喇叭声。11、星月交辉：[xīng yuè jiāo huī]，星星和月亮交相照耀。造句： 吕邪迷糊着睁开朦胧小眼，就看到夜空中星月交辉，繁星点点。12、万籁无声：[wàn lài wú shēng]，形容周围环境非常安静，一点儿声响都没有。造句：在万籁无声的深夜，我们都能听到对方的呼吸。13、月明星稀：[yuè míng xīng xī]，月亮明亮时，星星就显得稀疏了。造句：天清气朗，月明星稀，海风徐徐，静谧幽人，两人没聊多久就都睡着了。14、繁星点点：[fán xīng diǎn diǎn]，星星很多，闪闪发光。造句：繁星点点的夜空，皎洁灿烂的星光，流动的云彩，到处都弥漫在一片神秘浪漫的氛围中。15、皓月当空：[hào yuè dāng kōng]，明亮的月亮在空中照耀着大地，形容月光皎洁，天气晴和。造句：中秋节的晚上，皓月当空，我们全家在快乐的气氛中赏月。

　　我的家乡是一个小镇，那里风景优美，绿树成阴。 春天，树枝抽出了嫩绿的枝条，小草懒洋洋地睁开眼，花儿们也纷纷盛开了，红的、蓝的、黄的、紫的，千奇百怪，五光十色。花儿们发出阵阵醉人的芳香，引来一大群蝴蝶，蝴蝶在空中翩翩起舞，那景象可真美！ 夏天到了，树叶更绿了，还去河里摸鱼，那一棵棵树像一些战士一般。花儿们也更加芬芳诱人。荷花也开了，荷叶是绿的，荷花是淡粉红的，真美啊！我们小孩子最喜欢到荷塘采莲藕吃，一条条鱼在水中成群结队地游来游去，一被我们捉上来，就“活蹦乱跳”，看它乞求的样子，真可怜！ 秋天，大雁往南飞，一会儿排成人字形，一会儿又排成一字形。天空湛蓝湛蓝的，天空下是一片金黄的景象，麦子是黄的，树叶也是黄的，一片一片的树叶离开大树妈妈的怀抱，独自一人“旅行”。农民伯伯在这个季节可乐了，也很忙，因为他们辛勤的汗水培育的麦子成熟了，他们都忙着割麦子呢！ 冬天来到了，一颗颗雪花从天上飘落到地上，整个世界一片洁白，雪花是花状的，白白的，一捏在手中就融化成晶莹的小水珠了。 我的家乡真美丽，我爱我的家乡！

星空的诗句有：印记不要因为也许会改变就不肯说那句美丽的誓言不要因为也许会分离就不敢求一次倾心的相遇总有一些什么会留下来的吧留下来作一件不灭的印记好让好让那些不相识的人也能知道我曾经怎样深深地爱过你十字路口如果我真的爱过你我就不会忘记当然我还是得不动声色地走下去说这天气真好风又轻柔还能在斜阳里疲倦地微笑说人生真平凡也没有什么波折和忧愁可是如果我真的爱过你我就不会忘记就是在这个十字路口年轻的你我曾挥手从此分离青青的衣裾我是一条清澈的河流绕过你伫立的沙洲在那个晴朗的夏日有着许多白云的午后你青青的衣裾在风里飘摇倒映在我心中又象一条温柔的水草带着甜蜜的痛楚我频频回顾我将流过不再重回此生将无法与你再相会我知道冬必将来临芦花也会凋尽两岸的悲欢将如云烟只留下群星在遥远的天边在冰封之前我将流入大海而在幽暗的孤寂的海底我会将你想起还有你那还有你那青青的衣裾给青春并不是我愿意这样老去的只是白天黑夜不断地催促将你从我身边夺去到连我伸手也再无法构及的距离悲剧的虚与实其实并不是真的老去若真的老去了此刻再相见时我心中如何还能有轰然的狂喜因此你迟疑着回首时也不是真的忘记若真的忘记了月光下你眼里那能有柔情如许可是又好像并不是真的在意若真的曾经那样思念过又如何能云淡风轻地握手寒喧然后含笑道别静静地目送你再次再次的离我而去山百合与人无争静静地开放一朵芬芳的山百合静静地开放在我的心里没有人知道它的存在它的洁白只有我的流浪者在孤独的路途上时时微笑地想起它来艺术家你已用泪洗净我的笔好让我在今夜画出满池的烟雨而在心中那个芬芳的角落你为我雕出一朵永不凋谢的荷浮生若梦我爱何者是实何者是空何去何从永远的流浪者你尽管说吧说你爱我或者不爱你尽管去选择那些难懂的字句把它们反反复复地排列开来你尽管说吧列蒂齐亚你的心情我都会明白你尽管变吧变得快乐或者冷漠你尽管去试戴所有的复杂的面具走一些曲折的路你尽管去做吧列蒂齐亚你的心情我都会明白人世间尽管有变迁友朋里尽管有难测的胸怀我只知道列蒂齐亚你是我最初和最后的爱在迢遥的星空上我是你的我是你的永远的流浪者用漂泊的一生安静地守护在你的幸福和你温柔的心情之外可是列蒂齐亚漂流在恒星的走廊上想你却无法传递流浪者的心情啊列蒂齐亚你可明白，恍如星空疏间密。星空的诗句有：恍如星空疏间密，天上房星空不动。注音是：ㄒ一ㄥㄎㄨㄥ。拼音是：xīngkōng。词性是：名词。结构是：星(上下结构)空(上下结构)。星空的具体解释是什么呢，我们通过以下几个方面为您介绍：一、词语解释【点此查看计划详细内容】星空xīngkōng。(1)缀满星星的夜空。二、引证解释⒈有星光的天空。引沙汀《困兽记》十八：“仿佛他们的心思，全被灿烂的星空吸引住了。”杨朔《潼关之夜》：“潼关的城墙和城楼衬映在星空之下，画出深黑色的轮廓。”冰心《走进人民大会堂》：“走进万人大礼堂好像凝立在夏夜的星空之下。”三、国语词典有星的夜空。如：「今晚的星空特别灿烂。」词语翻译英语starrysky,theheavens德语Sternenhimmel(S)_法语cielétoilé四、网络解释星空（几米著绘本）《星空》是2009年现代出版社出版的图书，作者是几米。《星空》，是风靡华人世界的畅销绘本画家几米2009年最新力作。描述了一个关于长大的故事：有个不爱说话的少女，认识了一个不爱说话的少年，他们都不是最快乐的孩子。有一天，他们逃离城市，翻山越岭，来到少女的爷爷曾经住过的山中小屋。在山里的夜晚，他们看到了最美丽的星空。后来，少女病了，而少年不知去向他们究竟经历了什么，才能走出心理的阴影呢？星空（汉语词语）星空是汉语词语，拼音是xīngkōng，指有星光的天空。关于星空的近义词苍穹夜空高空天空关于星空的诗词《跋江都王马·天上房星空不动》《感事·将石星空堕》《独携·独携酸泪注星空》关于星空的成语空空如也妙手空空星星之火零零星星空空洞洞空口说空话买空卖空空对空丧门星卖空买空关于星空的造句1、闪烁的星空下，我拖着疲惫的身体向家走去。2、有一些人活在记忆里，刻骨铭心；有一些人活在身边，却很遥远。如果清风有情，那么明月可鉴；如果落花有情，那么流水可懂；如果流星有情，那么星空可睹。3、那时的美苏太空热一下子席卷全球，人们发射各种航天器到太空中去，写各种诗词语句画各种图画发射到太空中去，人们频繁地仰望星空，渴望着，等待着。4、我喜欢光芒四射星空，因为它给了我无限美好的遐想。5、广阔的星空中到底有多少秘密，谁也说不清。点此查看更多关于星空的详细信息