精华内容
下载资源
问答
  • include-media —导出断点插件 获取包含媒体。 介绍 是一个很好的解决方案,用于存储断点列表,并使用它们来使用媒体查询来更改网站的行为。 但是,该断点列表仅限于CSS样式表的范围。 在大多数情况下,这很好,但是...
  • node-sass-js-importer-源码

    2021-05-29 09:16:05
    请注意,此包希望您从导入的文件中导出 JavaScript 对象文字。 该模块与挂钩。 var sass = require ( 'node-sass' ) ; var jsImporter = require ( 'node-sass-js-importer' ) ; // Example 1 sass . render ( { ...
  • 关键词:sass全局变量 js引用sass变量 1 如何在样式中使用 scss 的声明的全局变量 假设我们有一个全局的 scss 变量文件/styles/_vars.sass,如下: $red: red; $blue: blue; 如果想要在组件的样式中使用这些变量,...

    关键词:sass全局变量 js引用sass变量

    1 如何在样式中使用 scss 的声明的全局变量

    假设我们有一个全局的 scss 变量文件/styles/_vars.sass,如下:

    $red: red;
    $blue: blue;

    如果想要在组件的样式中使用这些变量,我们需要引入这个文件,像这样:

    <style lang="scss" scoped>
    
    @import '/styles/_var.scss';
    
    .login {
      background-color: $red;
    }
    </style>

    这种方式虽然解决了问题,但带来了很多问题:代码冗余、不好维护...

    我们迫切需要一种全新的更优雅的方法——sass-resources-loader

    该加载器将 sass 资源自动导入每个所需的 sass 模块。 因此,您可以在所有 sass 样式中使用共享变量和mixin,而无需在每个文件中手动导入它们。
    注意,此loader不限于sass,并适用于 less,post-css等。
    Supports Webpack 4.

    官方github上对于不同的配置都给出详细的说明,请参考sass-resources-loader

    2 如何在 js 中使用 sass 的全局变量

    通过webpackcss module,我们可以轻松的在 js 中使用 sass 文件中定义的全局变量。

    第一步,安装需要的依赖:

    npm install sass-loader node-sass webpack --save-dev

    第二步使用sass-loader配置webpack,这样我们就能在 js 中使用 sass 变量了。

    // webpack.config.js
    
    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
          }
        ]
      }
    }

    现在,我们在 sass 文件中定义变量并将其导出为 js,CSS Module 有一个:export关键字,它在功能上等同于 ES6 的关键字export,即导出一个 js 对象。

    // /styles/global.scss
    
    $exportedValue: #ccc;
    
    :export {
      exportedKey: $exportedValue;
        /* ... */
    }

    现在,我们可以在 js 中使用这个变量啦。

    // js/test.js
    
    import styles from '/styles/global.scss'
    console.log(styles)

    参考

    css-modules
    sass-resources-loader
    how-to-share-variables-between-js-and-sass

    转载于:https://www.cnblogs.com/fayin/p/10510760.html

    展开全文
  • JS packages: JS软件包: gulp-concat — concatenates multiple JS files into one file gulp-concat —将多个JS文件合并一个文件 gulp-uglify — minifies JS gulp gulp-uglify uglify —缩小JS Now that we ...

    gulp sass

    This post was originally published on Coder-Coder.com.

    该帖子最初发布在Coder-Coder.com上

    This tutorial will explain, step by step, how to set up Gulp 4 in your workflow, as well as how to migrate from Gulp 3 to Gulp 4 syntax.

    本教程将逐步说明如何在工作流程中设置Gulp 4,以及如何从Gulp 3迁移到Gulp 4语法。

    Need to just quickly get your Gulp 3 gulpfile.js working with Gulp 4? Click here to go right to that part of the post.

    是否需要快速使Gulp 3 gulpfile.js与Gulp 4一起使用? 单击此处转到帖子的该部分。

    1. Install the gulp-cli on your command line by running npm install gulp-cli -g.

      通过运行npm install gulp-cli -g在命令行上npm install gulp-cli -g

    2. Install Gulp by running npm install gulp.

      通过运行npm install gulp安装Gulp。

    3. Install other npm packages for your Gulp workflow.

      为Gulp工作流程安装其他npm软件包。
    4. Create a gulpfile.js file in your project root.

      在项目根目录中创建一个gulpfile.js文件。

    5. Import your npm packages as modules in your gulpfile.

      将您的npm软件包作为模块导入gulpfile中。
    6. Add your tasks to the gulpfile to compile your SCSS/JS files and run a watch task.

      将您的任务添加到gulpfile中,以编译您的SCSS / JS文件并运行监视任务。
    7. Run the gulp command to run all your tasks.

      运行gulp命令以运行所有任务。

    什么是Gulp,它有什么作用? (What is Gulp and what does it do?)

    Gulp is a tool that will run various tasks for you in your web development workflow. It might be called a bundler, build tool, or a task runner. They all mean roughly the same thing.

    Gulp是一个工具,它将在您的Web开发工作流程中为您运行各种任务。 它可能被称为捆绑器,构建工具或任务运行器。 它们的意思大致相同。

    Similar tools are Webpack and Grunt (although Grunt is quickly becoming obsolete).

    Webpack和Grunt(尽管Grunt很快就过时了)是类似的工具。

    Here’s what we’re going to have Gulp do for us:

    这是古普为我们做的:

    1. Compile our Sass files to CSS

      将我们的Sass文件编译为CSS
    2. Add vendor prefixes to our CSS

      在我们CSS中添加供应商前缀
    3. Minify our final CSS file

      缩小最终CSS文件
    4. Concatenate (i.e. combine) our JS files

      连接(即合并)我们的JS文件
    5. Uglify our final JS file

      统一我们的最终JS文件
    6. Move the final CSS/JS files into our /dist folder.

      将最终CSS / JS文件移动到我们的/dist文件夹中。

    Pretty cool, right?!

    很酷吧?

    So the way it works is, all your settings and tasks are stored in a gulpfile.js file. And you run Gulp on your command line.

    因此,它的工作方式是,所有设置和任务都存储在gulpfile.js文件中。 然后在命令行上运行Gulp。

    The great part about that is that once you have your gulpfile all set up, you can easily reuse it for other projects. So it’s a huge time-saver!

    最重要的是,一旦全部设置了gulpfile,就可以轻松地将其重新用于其他项目。 因此,这节省了很多时间!

    Let’s move on to installing and setting up Gulp on your computer.

    让我们继续在计算机上安装和设置Gulp。

    使用有效的演示项目安装Gulp (Installing Gulp, using a working demo project)

    Before you can run Gulp, you will need to install a couple of things:

    在运行Gulp之前,您需要安装以下几点:

    Once you have Gulp working, check out a demo project I built that uses Gulp! It’s a front-end boilerplate project that’s meant to be a quick way for me to get started with any simple front-end website.

    在Gulp工作之后,请查看我使用Gulp构建的演示项目! 这是一个前端样板项目,对于我来说,这是快速入门任何简单的前端网站的方法。

    (I also have plenty of code snippets in the rest of this tutorial, so you can just refer to those as well!)

    (在本教程的其余部分中,我也有很多代码片段,因此您也可以参考它们!)

    To set the front-end boilerplate project up:

    设置前端样板项目:

    • Clone or download the Git repo of this project onto your computer.

      将此项目的Git存储库克隆或下载到您的计算机上。

    • Open the project, and in the root project folder, go to your command line and run npm install. This will install the npm packages listed in the package.json file, particularly Gulp 4.

      打开项目,然后在根项目文件夹中,转到命令行并运行npm install 。 这将安装package.json文件中列出的npm软件包,特别是Gulp 4。

    You should now have the project files set up, and all the npm packages installed that we’ll be using to run Gulp tasks.

    现在,您应该已经设置了项目文件,并安装了我们将用于运行Gulp任务的所有npm软件包。

    Since the files from the repo are ready to go, if you type in gulp in the command line, you should see an output like this:

    由于回购中的文件已准备就绪,因此,如果您在命令行中输入gulp ,则应该看到如下输出:

    > gulp [22:29:48] Using gulpfile ~\Documents\GitHub\frontend-boilerplate\gulpfile.js [22:29:48] Starting 'default'... [22:29:48] Starting 'scssTask'... [22:29:48] Starting 'jsTask'... [22:29:48] Finished 'jsTask' after 340 ms [22:29:48] Finished 'scssTask' after 347 ms [22:29:48] Starting 'watchTask'...

    And you’ve run Gulp!

    而且您已经运行了Gulp!

    运行Gulp时项目中发生了什么? (What’s happening in the project when you run Gulp?)

    All right, you have the project successfully working! Now let’s get into more detail on what’s in the project and how it works.

    好的,您的项目成功进行了! 现在让我们更详细地了解项目中的内容及其工作方式。

    First, here’s a quick rundown of the file structure of our project:

    首先,这是我们项目文件结构的简要介绍:

    • index.html — your main HTML file

      index.html —您的主要HTML文件

    • package.json — contains all the npm packages to install when you run npm install.

      package.json —包含运行npm install时要安装的所有npm软件包。

    • gulpfile.js — contains the config and runs all the Gulp tasks

      gulpfile.js —包含配置并运行所有Gulp任务

    • /app — working folder, you will edit SCSS/JS files in here

      / app-工作文件夹,您将在此处编辑SCSS / JS文件

    • /dist — Gulp will output files here, don’t edit these files

      / dist -Gulp将在此处输出文件,请勿编辑这些文件

    In your workflow, you will edit the HTML, SCSS, and JS files. Gulp will then detect any changes and compile everything. Then you will load your final CSS/JS files from the /dist folder in your index.html file.

    在工作流程中,您将编辑HTML,SCSS和JS文件。 Gulp然后将检测任何更改并编译所有内容。 然后,您将从index.html文件中的/dist文件夹加载最终CSS / JS文件。

    Now that we have Gulp running, let’s take a closer look at how Gulp works.

    现在我们已经运行了Gulp,下面让我们仔细看看Gulp的工作原理。

    gulpfile.js中到底是什么? (What exactly is in the gulpfile.js?)

    Here’s an in-depth explanation of each section of the gulpfile, and what they do:

    这是对gulpfile的每个部分及其作用的深入说明:

    步骤1:初始化npm模块 (Step 1: Initialize npm modules)

    At the very top of the gulpfile.js, we have a whole bunch of constants that import the npm packages we installed earlier, using the require() function.

    gulpfile.js的最顶部,我们有一堆常量,它们使用require()函数导入之前安装的npm软件包。

    Here’s what our packages do:

    这是我们的软件包的作用:

    Gulp package:

    大包装:

    • gulp — runs everything in the gulpfile.js. We’re exporting just the specific gulp functions that we will be using, like src, dest, watch, and others. This allows us to call those functions directly without the gulp, for example we can just type in src() instead of gulp.src().

      gulp -运行在gulpfile.js一切。 我们仅导出将要使用的特定gulp函数,例如srcdestwatch和其他函数。 这使我们可以直接调用这些函数没有gulp ,比如我们可以在只需键入src()代替gulp.src()

    CSS packages:

    CSS包:

    • gulp-sourcemaps — maps the CSS styles back to the original SCSS file in your browser dev tools

      gulp-sourcemaps将CSS样式映射回浏览器开发工具中的原始SCSS文件

    • gulp-sass — compiles SCSS to CSS

      gulp-sass —将SCSS编译为CSS

    • gulp-postcss — runs autoprefixer and cssnano (see below)

      gulp-postcss运行autoprefixer和cssnano(请参见下文)

    • autoprefixer — adds vendor prefixes to CSS

      autoprefixer —将供应商前缀添加到CSS

    • cssnano — minifies CSS

      cssnano —缩小CSS

    If you’ve used Gulp before, you might be wondering why I’m using straight-up autoprefixer and cssnano, instead of gulp-autoprefixer and gulp-cssnano. For some reason, using them will work, but will prevent sourcemaps from working. Read more about that issue here.

    如果您以前使用过Gulp,则您可能想知道为什么我要使用直接的autoprefixercssnano而不是cssnano gulp-autoprefixergulp-cssnano 出于某种原因,使用它们会起作用,但会阻止源地图起作用。 在此处阅读有关该问题的更多信息。

    JS packages:

    JS软件包:

    • gulp-concat — concatenates multiple JS files into one file

      gulp-concat —将多个JS文件合并为一个文件

    • gulp-uglify — minifies JS

      gulp gulp-uglify uglify —缩小JS

    Now that we have our modules added, let’s put them to work!

    现在我们已经添加了模块,让我们开始使用它们吧!

    步骤2:使用模块来运行任务 (Step 2: Use the modules to run your tasks)

    A “task” in Gulp is basically a function that performs a specific purpose.

    Gulp中的“任务”基本上是执行特定目的的功能。

    We’re creating a few utility tasks to compile our SCSS and JS files, and also to watch those files for any changes. Then those utility tasks will be run in our default Gulp task when we type gulpon the command line.

    我们正在创建一些实用程序任务来编译我们的SCSS和JS文件,并监视这些文件的任何更改。 然后,当在命令行上键入gulp时,这些实用程序任务将在我们的默认Gulp任务中运行。

    为文件路径创建常量 (Creating constants for file paths)

    Before writing our tasks, though, we have a few lines of code that save our file paths as constants. This is optional, but I like using path variables so that we don’t have to manually retype them each time:

    但是,在编写任务之前,我们有几行代码将文件路径另存为常量。 这是可选的,但是我喜欢使用路径变量,因此我们不必每次都手动重新键入它们:

    This code creates scssPath and jsPath constants that we will use to tell Gulp where files are found.

    这段代码创建了scssPathjsPath常量,我们将用来告诉Gulp在哪里找到文件。

    Sass任务 (Sass task)

    Here’s the code for our Sass task:

    这是我们的Sass任务的代码:

    function scssTask(){        return src(files.scssPath)        .pipe(sourcemaps.init())        .pipe(sass())        .pipe(postcss([ autoprefixer(), cssnano() ]))        .pipe(sourcemaps.write('.'))        .pipe(dest('dist')    );}

    Our Sass task, called scssTask(), is doing several things. In Gulp, you can chain multiple functions by using the Gulp function pipe() after the first function.

    我们的Sass任务叫做scssTask() ,它正在做几件事。 在Gulp中,可以通过在第一个函数之后使用Gulp函数pipe()链接多个函数。

    In our task, Gulp is first running src() to load the source directory of the SCSS files. It’s using the constant we created earlier, files.scssPath.

    在我们的任务中,Gulp首先运行src()来加载SCSS文件的源目录。 它使用了我们先前创建的常量files.scssPath

    Then after src() we’re piping everything else into the build process. You can think about it like adding more and more sections of pipe onto an existing pipe.

    然后在src()我们将其他所有内容传递到构建过程中。 您可以考虑一下它,就像在现有管道上添加越来越多的管道部分一样。

    The functions it’s running are:

    它运行的功能是:

    • sourcemaps.init() — sourcemaps needs to be added first after src()

      sourcemaps.init() -需要先在src()之后添加源映射

    • sass() does the compiling of all the SCSS files to one CSS file

      sass()将所有SCSS文件编译为一个CSS文件

    • postcss() runs two other plugins:

      postcss()运行另外两个插件:

    • - autoprefixer() to add vendor prefixes to the CSS

      autoprefixer()将供应商前缀添加到CSS

    • - cssnano() to minify the CSS file

      cssnano()缩小CSS文件

    • sourcemaps.write() creates the sourcemaps file in the same directory.

      sourcemaps.write()在同一目录中创建sourcemaps文件。

    • dest() tells Gulp to put the final CSS file and CSS sourcemaps file in the /dist folder.

      dest()告诉Gulp将最终CSS文件和CSS sourcemaps文件放在/dist文件夹中。

    JS任务 (JS task)

    Here’s the code for our JavaScript task:

    这是我们JavaScript任务的代码:

    function jsTask(){    return src([files.jsPath])        .pipe(concat('all.js'))        .pipe(uglify())        .pipe(dest('dist')    );}

    Our JavaScript task, called jsTask(), is also running multiple functions:

    我们JavaScript任务jsTask()也正在运行多个功能:

    • src() to load the JS files from files.jsPath.

      src()以从files.jsPath加载JS文件。

    • concat() to concatenate all the JS files into one JS file.

      concat()将所有JS文件连接为一个JS文件。

    • uglify() to uglify/minify the JS file.

      uglify()来丑化/缩小JS文件。

    • dest() to move the final JS file into the /dist folder.

      dest()将最终的JS文件移动到/dist文件夹中。

    观看任务 (Watch task)

    The watch() function is a super handy part of Gulp. When you run it, it will run continuously, waiting to detect any changes to the files you tell it to watch. When it detects changes, it will run any number of tasks you tell it to.

    watch()函数是Gulp的超级方便部分。 当您运行它时,它将连续运行,等待检测您告诉它观看的文件的任何更改。 当它检测到更改时,它将运行您告诉它的许多任务。

    This is great because then you don’t have to keep manually running gulp after every code change.

    这很棒,因为这样,您不必在每次代码更改后都保持手动运行gulp

    Here’s the code for our watch task:

    这是我们监视任务的代码:

    function watchTask(){    watch(        [files.scssPath, files.jsPath],        parallel(scssTask, jsTask)    );}

    The watch() function takes three parameters, but we’re just using two:

    watch()函数采用三个参数,但我们仅使用两个参数:

    • globs, meaning the file path strings,

      glob,表示文件路径字符串,
    • options (not used), and

      选项(未使用),以及
    • tasks, meaning which tasks we want to run.

      任务,这意味着我们要运行哪些任务。

    What we’re having our watch task do is watch the files in our scssPath and jsPath directories. Then if any changes are made in either, run the scssTask and jsTask tasks simultaneously.

    我们要执行的监视任务是监视scssPathjsPath目录中的文件。 然后,如果任何一个都进行了scssTaskjsTask同时运行scssTaskjsTask任务。

    Now that we’ve gotten our utility tasks set up, we need to set up our main Gulp task.

    现在我们已经设置了实用程序任务,我们需要设置主要的Gulp任务。

    默认任务 (Default task)

    This is the main Gulp task, which will automatically run if you type in gulp on the command line.

    这是主要的任务咕嘟咕嘟,如果你键入它会自动运行gulp在命令行上。

    exports.default = series( parallel(scssTask, jsTask), watchTask);

    Gulp will automatically search for a default task in your gulpfile.js when you use the gulpcommand. So you must export the default task in order for it to work.

    咕嘟咕嘟会自动搜索default在您的任务gulpfile.js当您使用gulp命令。 因此,必须导出默认任务才能使其正常工作。

    Our default task will do the following:

    我们的默认任务将执行以下操作:

    • Run the scssTask and jsTask simultaneously using parallel()

      使用parallel()同时运行scssTaskjsTask

    • Then run the watchTask

      然后运行watchTask

    You’ll also notice that we are putting all those tasks inside the series() function.

    您还将注意到,我们将所有这些任务放入了series()函数中。

    This is one of the major new changes in Gulp 4 for how it handles tasks– you are required to wrap all tasks (even single ones) either in series() or parallel().

    这是Gulp 4处理任务的主要新变化之一-您需要将所有任务(甚至是单个任务)包装为series()parallel()

    关于注册任务的注释:Gulp 4中的更改 (A note on registering tasks: what’s changed in Gulp 4)

    If you’ve been using the tasks() function to run everything, you may have noticed that there’s a difference now.

    如果您一直使用tasks()函数来运行所有程序,则可能已经注意到现在有所不同。

    Instead of using gulp.task() to contain all your task functions, we’re creating actual functions like scssTask() and watchTask().

    我们不是使用gulp.task()来包含所有任务功能,而是创建诸如scssTask()watchTask()类的实际功能。

    This is to follow Gulp’s official guidelines for creating tasks.

    这是为了遵循Gulp创建任务的官方指南。

    The Gulp team recommends using exports rather than tasks():

    Gulp团队建议使用exports而不是tasks()

    “In the past, task() was used to register your functions as tasks. While that API is still available, exporting should be the primary registration mechanism, except in edge cases where exports won’t work.” [Gulp Documentation]

    “过去,使用task()将函数注册为任务。 尽管该API仍然可用,但是导出应该是主要的注册机制,除非在某些情况下无法进行导出。” [ Gulp文档 ]

    So, while they still let you use the task() function, it’s more current to create JS functions for each task and then export them.

    因此,尽管它们仍然允许您使用task()函数,但为每个任务创建JS函数然后将其导出更为最新。

    If you can, I’d recommend updating your syntax to reflect this, as it’s possible that Gulp will deprecate task() at some point.

    如果可以的话,我建议您更新语法以反映这一点,因为Gulp可能会在某个时候弃用task()

    从Gulp 3迁移时遇到问题吗? (Problems Migrating from Gulp 3?)

    If you’ve been using Gulp 3 and all you want is to get the dang thing working with Gulp 4, you’re in luck!

    如果您一直在使用Gulp 3,而您想要做的就是让Gulp 4可以正常工作,那么您真幸运!

    Before, in Gulp 3, you could simply list a single function or multiple functions in an array. However, in Gulp 4, doing so without wrapping them in either series() or parallel() will throw an error now.

    之前,在Gulp 3中,您可以简单地在数组中列出单个函数或多个函数。 但是,在Gulp 4中,如果不将它们包装在series()parallel()则会立即引发错误。

    Something like:

    就像是:

    AssertionError [ERR_ASSERTION]: Task function must be specified

    AssertionError [ERR_ASSERTION]: Task function must be specified

    Gulp 4 introduces two new functions to run tasks: series() and parallel(). It gives you the option of running multiple tasks concurrently, or one after the other.

    Gulp 4引入了两个运行任务的新函数: series()parallel() 。 它使您可以选择同时运行多个任务,也可以一个接一个地运行。

    So to quickly fix the error, put all your tasks into either a series() or parallel()function.

    因此,要快速解决该错误,请将所有任务放到series()parallel()函数中。

    Tasks in (old) Gulp 3 syntax

    Gulp 3语法中的任务

    In Gulp 3, you might have run tasks this way:

    在Gulp 3中,您可能以这种方式运行任务:

    gulp.task('default', ['sass', 'js', 'watch']);

    gulp.task('default', ['sass', 'js', 'watch']);

    gulp.watch('app/scss/*.scss', ['sass']);

    gulp.watch('app/scss/*.scss', ['sass']);

    Tasks in Gulp 4 syntax

    Gulp 4语法中的任务

    Put those tasks into a series() function like this:

    将这些任务放入如下的series()函数中:

    gulp.task('default', gulp.series('sass', 'js', 'watch'));

    gulp.task('default', gulp.series('sass', 'js', 'watch'));

    gulp.watch('app/scss/*.scss', gulp.series('sass'));

    gulp.watch('app/scss/*.scss', gulp.series('sass'));

    And that will fix the task function error with the smallest change possible! ?

    这样就可以以最小的变化修复任务功能错误! ?

    项目文件下载 (Project files download)

    All the code I’ve displayed here is from a GitHub repository I have for front-end boilerplate. It’s meant as a quick starter kit for any simple front-end website project.

    我在这里显示的所有代码均来自我为前端样板提供的GitHub存储库。 它是任何简单的前端网站项目的快速入门套件。

    You’re welcome to check it out, customize, and use it for your own projects!

    欢迎您检出,自定义并将其用于自己的项目!

    Check out the GitHub repository here.

    在此处查看GitHub存储库。

    在结束时 (In closing)

    I hope that you’ve found this walk-through of how to get Gulp 4 running helpful!

    我希望您对如何使Gulp 4运行有帮助的逐步演练!

    If you enjoyed this post or have a question, feel free to leave a comment below! ?

    如果您喜欢这篇文章或有疑问,请在下面发表评论! ?

    Want more?

    想要更多?

    ? Read more tutorials on my blog, coder-coder.com.? Sign up here to get emails about new articles.? Join 24,000+ others — Follow @thecodercoder on Instagram.? Check out coding tutorials on my YouTube channel.

    ? 在我的博客c oder-coder.com上阅读更多教程 ? 请在这里获取有关新文章的电子邮件。 ? 加入24,000多个其他人- 在Instagram上关注@thecodercoder。 ? 在我的YouTube频道上查看编码教程。

    翻译自: https://www.freecodecamp.org/news/gulp-4-walk-through-with-example-code-c3c018eab306/

    gulp sass

    展开全文
  • 入门sass

    2020-09-08 21:10:30
    sass:可编译的css语法 可维护性,可重复使用性更高 可定义变量,if,for等,提高css编译效率。....sass:浏览器不能直接执行,需要把sass转化css来执行,所以要进行编译 编译方法: (1)使用vscode,搜索sass (2)

    sass:可编译的css语法

    可维护性,可重复使用性更高
    可定义变量,if,for等,提高css编译效率。但在各种框架语法中,已经可以满足我们样式需求
    如果UI框架中,没有的效果,可以用sass

    基本语法:
    1.两种文件格式
    .sass:没有{}的css,但不好区分选择器和样式,一般不适用
    .scss:与普通的css完全一致,只是多了变量等新语法内容
    2.两种文件的执行
    .sass:浏览器不能直接执行,需要把sass转化为css来执行,所以要进行编译
    编译方法:
    (1)使用vscode,搜索sass
    (2)使用node.js,一般是开发时使用。需要安装全局sass
    npm i -g sass
    (3)使用gulp进行编译,同时打包压缩
    一般是项目上线时使用
    nodejs编译sass的语法:
    对一个文件进行编译–需要手动编译,要重新执行npm
    1.建立scss文件,demo.scss
    2.在cpm中执行文件夹,并建立1.css文件
    sass demo.scss 1.css
    对文件进行监听
    sass --watch scss文件名
    对文件夹进行监听
    sass --watch sass文件夹:css文件夹
    使用sass的基本语法
    1.变量的使用:
    变 量 名 称 : 数 值 , 使 用 时 要 有 变量名称:数值,使用时要有 :使符号
    2.if判断
    执行逻辑与JS和PHP中是完全相同的,语法格式不同
    sass中判断条件没有小括号
    (1)@if 变量 判断符号 数值 {样式}
    (2)@if 变量 判断符号 数值 {样式}
    @else {样式}
    (3)@if 变量 判断符号 数值 {样式}
    @elseif 变量 判断符号 数值 {样式}
    @lese {样式}
    3.for循环
    (1)从数值1到数值2,包括数值1 ,不包括数值2
    @for 变量 from 数值1 to 数值2{定义的程序}
    解析循环变量i时,要用#{KaTeX parse error: Expected 'EOF', got '}' at position 2: i}̲ (2)从数值…i}
    4.each循环
    –针对数组的循环
    –执行方式
    $变量:(),(),(),()
    @each 变 量 1 , 变量1, 1变量2 in KaTeX parse error: Expected '}', got '&' at position 206: … 伪类:div{&̲:hover{}} 相当于 …type.KaTeX parse error: Expected '}', got 'EOF' at end of input: …kit-transition:type KaTeX parse error: Expected 'EOF', got '}' at position 23: … }̲ …type:all.KaTeX parse error: Expected '}', got 'EOF' at end of input: …kit-transition:type $time;
    }
    div{@include t3(all,2s);}
    打包sass
    先将sass转化为css
    1.下载sass编译使用的依赖包 npm i gulp-sass
    2.加载gulp-sass依赖包(gulpfile.js)
    const sass = require(‘gulp-sass’)
    3.制定sass打包规范
    (1)先将sass转化成css
    const sassHandler = function(){
    return gulp.src(’./src/scss/.scss’).pipe(sass()).pipe(autoprefixer()).pipe(cssmin()).pipe(gulp.dest(’./diss/css’))
    }
    4.指定监听规范
    const watchHandler = function(){
    添加sass的监听规范
    gulp.watch(’./src/sass/
    .scss’,sassHandler)
    }
    5.导出默认执行程序
    module.exports.default = gulp.series(
    delHandler,
    gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler,sassHandler),
    webserverHandler,
    watchHandler
    )

    展开全文
  • SassJs 之间变量共享

    千次阅读 2020-02-21 00:46:03
    假设我们在xxx.scss中声明了一个theme:blue,我们在 js 中该怎么获取这个变量呢?我们可以通过css-modules:export来实现。 // xxx.scss $theme: blue; :export { theme: $theme; } // test.js import ...

    假设我们在xxx.scss中声明了一个 theme:blue,我们在 js 中该怎么获取这个变量呢?我们可以通过 css-modules :export来实现。 

    // xxx.scss
    $theme: red;
    
    :export {
      theme: $theme;
    }
    
    // test.js
    import variables from '@/styles/xxx.scss'
    console.log(variables.theme) // red
    

    详情可以看-How to Share Variables Between Javascript and Sass

    展开全文
  • 随着大型单页应用程序的兴起,Javascript和CSS越来越紧密地交织在一起。通常情况下,我们会在js与scss中分别维护两份变量。然而,在开发过程中有时会只更新一处而忘记维护另一份配置变量,并最终导致令人沮丧的bug。...
  • 在Vue中我们往往会单独抽取css全局变量,除了在页面css中使用,...Sass 如果没有安装可自行安装。 wepack 配置: module.exports = { //... module: { rules: [ //... { test: /\.scss$/, loaders: ["style-.
  • react-typescript-sass-standard-template 项目简介 由于 Create React App 脚手架创建的项目过于简陋,没有集成诸如 eslint 等工具,致使每次在开发 react 项目的时候,就要颇费一番周折。针对这种不便,我搞了这个...
  • 有时候我们需要获取样式文件中的变量, 可以利用:export {}可以导出需要的变量。案例是在webpack中使用。 安装 npm install sass-loader node-sass webpack --save-dev 配置 // webpack.config.js module.exports = ...
  • Javascript如何与Sass,Less,Css之间共享变量? Javascript如何获取Sass,Less,Css设置的变量? jst如何获取Sass,Less,Css设置的变量? vue项目中js如何获取Sass,Less,Css设置的变量? vue-cle3.x项目中js如何获取...
  • sass导入sassThe greatest challenge for most developers to learning Sass isn’t the concept of preprocessors, or the language itself, but the hoops that must be jumped through to get it up and running....
  • 但是我所想到的是一些简单而直观的内容——不涉及结构更改,而是使用 CSS 自定义属性甚至 Sass 变量。 CSS 自定义属性和 JavaScript 自定义属性在这里应该不会令人感到惊讶。自浏览器提供支持以来,他们一直在做...
  • js 中 import variables
  • 什么重写SassSass的主要实现有Ruby Sass 11和LibSass 20(node-sass底层使用的是LibSass),它们都有各自的优缺点。Ruby Sass的实现语言是高级语言Ruby,更容易迭代,但存在运行速度慢,不易安装的缺点。...
  • Sass 学习笔记

    2021-03-30 08:53:04
    Sass 学习笔记 Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 ...
  • sass注释类型Standard CSS employs... Borrowing a syntax from JavaScript, Sass introduces one more, creating a very powerful and useful variant. 标准CSS仅采用一种注释形式 。 SassJavaScript借用了一种语...
  • module&sass

    2020-08-03 23:43:17
    这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有组织代码提供任何明显帮助,甚至没有类的概念,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码 <script src="jquery.js
  • sass 循环Unlike scripting languages such as JavaScript and PHP, vanilla CSS cannot loop back on itself. The lack of this feature often means that portions of your site stylesheets must be written out ...
  • Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks sass打包未遂 问题描述:单页单入口文件sass 文件内容没有被导入进打包后以的文件 类似 这个问题...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,685
精华内容 1,874
关键字:

sass导出为js