精华内容
下载资源
问答
  • 一、scss css 1、当前工作区配置 (1)、安装 Easy Sass (2)、配置Easy Sass 第一步:如下图代开设置(也可以:ctrl+, 快捷键打开设置,或者在 文件 > 首选项 > 设置) 第二步:选择工作区 ...

    一、scss 转 css

    1、当前工作区配置

    (1)、安装 Easy Sass

    (2)、配置 Easy Sass

    第一步:如下图代开设置(也可以:ctrl+, 快捷键打开设置,或者在 文件 > 首选项 > 设置)

    第二步:选择工作区

    第三步:在 setting 文件中,输入以下代码:

    {
      /** Easy Sass 插件 **/
      "easysass.formats": [
        {//nested:嵌套缩进的 css 代码。//expanded:没有缩进的、扩展的css代码。//compact:简洁格式的 css 代码。//compressed:压缩后的 css 代码
          "format": "compressed", // 压缩
          "extension": ".css"
        }
      ],
      "easysass.targetDir": "css/" // 自定义css输出文件路径
    }

    ok!

    2、全局配置

    如果需要全局配置,在第二步设置的时候 选择“用户”而非“工作区”,然后将代码复制到用户设置的文件中即可。

     

    二、less 转 css

    1、当前工作区配置

    (1)、安装 Easy Sass

     

    (2)、配置 Easy Sass

    第一步:如下图代开设置(也可以:ctrl+, 快捷键打开设置,或者在 文件 > 首选项 > 设置)

    第二步:选择工作区

    第三步:在 setting 文件中,输入以下代码:

    {   
        /* Easy Less 插件 */
        "less.compile": {
            "out": "${workspaceRoot}\\css\\"
        }
    }

    2、全局配置

    如果需要全局配置,在第二步设置的时候 选择“用户”而非“工作区”,然后将代码复制到用户设置的文件中即可。

     

    三、弊端

    会自动生成很多 dist 文件,打包的时候,可以在 .gitignore 文件中屏蔽掉。

    【拓展】

    不需要从头写.gitignore文件,GitHub已经为我们准备了各种配置文件,只需要组合一下就可以使用了。所有配置文件可以直接在线浏览:https://github.com/github/gitignore

    忽略文件的原则是:

    • 忽略操作系统自动生成的文件,比如缩略图等;
    • 忽略编译生成的中间文件、可执行文件等,也就是如果一个文件是通过另一个文件自动生成的,那自动生成的文件就没必要放进版本库,比如Java编译产生的.class文件;
    • 忽略你自己的带有敏感信息的配置文件,比如存放口令的配置文件。

                                                                                                            ----引自 廖雪峰的官方网站

     

     

    展开全文
  • vscode让scss转css

    万次阅读 2018-05-06 21:35:07
    1、安装Easy scss插件(注意不能安装scss2css插件,会冲突报错)2、创建文件夹css,在里面创建.scss的文件。3、保存会自动创建两个.css文件,一个压缩了,一个没有压缩。4、还可以在最后将scss统一转化为css,右键--...

    1、安装Easy scss插件(注意不能安装scss2css插件,会冲突报错)


    2、创建文件夹css,在里面创建.scss的文件。

    3、保存会自动创建两个.css文件,一个压缩了,一个没有压缩。

    4、还可以在最后将scss统一转化为css,右键---》命令面板---》运行compile指令可以将scss文件统一转化成css文件

    展开全文
  • 收藏 scss转css 的网址

    2021-03-29 14:48:05
    https://www.sassmeister.com/

    https://www.sassmeister.com/

    展开全文
  • 推荐使用scss来编写css,在scss文件的头部使用import将px2rem导入 @import '/path/to/px2rem.scss'; 如果你的项目是单一尺寸设计图,那么你需要去px2rem.scss中定义全局的designWidth。 @function px2rem( $...

    hotcss官网:http://imochen.github.io/hotcss/

    用法

    引用:<script src="/path/to/hotcss.js"></script>

    根据页面渲染机制,hotcss.js必须在其他JS加载前加载,万不可异步加载。

    如果可以,你应将hotcss.js的内容以内嵌的方式写到标签里面进行加载,并且保证在其他js文件之前。

    为了避免不必要的bug,请将CSS放到该JS之前加载。

    css写法

    在src/目录下有px2rem.scss/px2rem.less两个文件。没错,这就是hotcss提供的将px转为rem的方法。

    推荐使用scss来编写css,在scss文件的头部使用import将px2rem导入

    @import '/path/to/px2rem.scss';
    

    如果你的项目是单一尺寸设计图,那么你需要去px2rem.scss中定义全局的designWidth。

    @function px2rem( $px ){
        @return $px*320/$designWidth/20 + rem;    /*这是在px2rem.scss中定义的,所有引用此文件的scss文件转换都会以此为标准*/
    }
    $designWidth : 750; //如设计图是750
    

    如果你的项目是多尺寸设计图,那么就不能定义全局的designWidth了。需要在你的业务scss中单独定义。如以下是style.scss

    @import '/path/to/px2rem.scss';
    $designWidth : 750; //如设计图是750      /*在另一个scss文件  如要适配1150的可以设置此值为1150 前提是你的px2rem中没有设置此值*/
    

    $designWidth必须要在使用px2rem前定义。否则scss编译会出错。

    注意:如果使用less,则需要引入less-plugin-functions,普通的less编译工具无法正常编译。

    想用px怎么办?

    直接写px肯定是不能适配的,那hotcss.js会在html上注册data-dpr属性,这个属性用来标识当前环境dpr值。那么要使用px可以这么写。

    //scss写法
    #container{
        font-size: 12px ;
        [data-dpr="2"] &{
            font-size: 24px;
        }
        [data-dpr="3"] &{
            font-size: 36px;
        }
    }
    

    接口说明

    initial-dpr
    可以通过强制设置dpr。来关闭响应的viewport scale。使得viewport scale始终为固定值。

    <meta name="hotcss" content="initial-dpr=1">
    <script src="/path/to/hotcss.js"></script>
    <!--
    如iphone微信强设dpr=1,则可以长按识别二维码。
    注意,强制设置dpr=1后,css中的1px在2x,3x屏上则不再是真实的1px。
    -->
    

    max-width
    通过设置该值来优化平板/PC访问体验,注意该值默认值为540。设置为0则该功能关闭。 为了配合使用该设置,请给body增加样式width:16rem;margin:0 auto;。

    <meta name="hotcss" content="max-width=640">
    <script src="/path/to/hotcss.js"></script>
    <!--
    默认为540,可根据具体需求自己定义
    -->
    <style>
    body{
        width: 16rem;
        margin: 0 auto;
    }
    </style>
    

    design-width
    通过对design-width的设置可以在本页运行的JS中直接使用hotcss.px2rem/hotcss.rem2px方法,无需再传递第二个值。

    <meta name="hotcss" content="design-width=750">
    <script src="/path/to/hotcss.js"></script>
    

    hotcss.mresize
    用于重新计算布局,一般不需要你手动调用。

    hotcss.mresize();
    

    hotcss.callback
    触发mresize的时候会执行该方法。

    hotcss.callback = function(){
      //your code here
    }
    

    单位转换hotcss.px2rem/hotcss.rem2px
    hotcss.px2rem 和 hotcss.rem2px。你可以在meta中设置design-width,则之后使用这两个方法不需要再传递第二个参数。

    迭代后仍然支持在js中设置hotcss.designWidth,推荐使用meta去设置。

    /**
    * [px2rem px值转换为rem值]
    * @param  {[number]} px          [需要转换的值]
    * @param  {[number]} designWidth [设计图的宽度尺寸]
    * @return {[number]}             [返回转换后的结果]
    */
    hotcss.px2rem( px , designWidth );
    
    /**
    * 同上。
    * 注意:因为rem可能为小数,转换后的px值有可能不是整数,需要自己手动处理。
    */
    hotcss.rem2px( rem , designWidth );
    
    
    //你可以在meta中定义design-width,此后使用px2rem/rem2px,就不需要传递designWidth值了。同时也支持旧的设置方式,直接在JS中设置hotcss.designWidth
    hotcss.px2rem(200);
    hotcss.rem2px(350);
    

    scss转为css方法(gulp)

    npm和gulp的安装就不讲了

    1.在项目文件夹下运行一下命令进行初始化

    npm init -y
    

    2.运行gulp

    npm install -D gulp
    

    3.安装依赖库 gulp-sass

    npm install -D gulp-sass
    

    4.创建Gulp脚本文件gulpfile.js

    // 加载gulp
    const gulp = require('gulp');
    // 读取用于编译Sass的插件
    const sass = require('gulp-sass');
    
    // 定义gulp任务
    gulp.task('default', function (done) {    //参数1:任务名称,后面执行gulp时对应名称   参数2:回调   传入done表明执行结束
      gulp.src('css/style.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'));
        done();
    });
    
    

    5.运行脚本

    npx gulp
    

    6.监听
    通常情况下,Sass文件的修改频率并不低,如果每一次修改都要手动指定任务,并运行我们的gulp脚本,是在是太麻烦了。

    下面我们就尝试利用gulp的watch功能,实现每当Sass文件的内容发生改变,就会自动执行对应的命令,重新进行编译。

    其实它的用法相当简单,

    gulp.watch("要监视的文件", 要进行的响应处理)
    

    利用这个函数,我们将原来的Gulp脚本文件gulpfile.js修改如下

    // 加载gulp
    const gulp = require('gulp');
    // 加载处理Sass文件的gulp插件
    const sass = require('gulp-sass');
    
    // 定义默认任务
    gulp.task('default', function (done) {
      // ★ 监视style.scss文件的变化
      gulp.watch('css/style.scss', function () {
        // 一旦style.scss的内容发生变化,则进行下面的处理
    
        // 读取style.scss文件的内容
        gulp.src('css/style.scss')
        // 进行Sass文件的编译
          .pipe(sass({
            outputStyle: 'expanded'
          })
          // 定义Sass文件编译过程中发生错误的响应处理(如果没有它,一旦发生错误则直接退出脚本)
            .on('error', sass.logError))
          // 编译后的css文件保存在css目录下
          .pipe(gulp.dest('css')); 
      });
      done();
    });
    
    展开全文
  • ![图片说明](https://img-ask.csdn.net/upload/201909/20/1568967560_224581.png) 希望能得到解决
  • 如果 在转化过程中语法没有问题的话 测试一下是否是文件的bom头的问题 转载于:https://www.cnblogs.com/gpzhen/p/8365436.html
  • 在package.json中scripts添加命令 "缩写": "webpack 命令... 先将scss转换css后,再将css文件剥离出来 之后,建好了scss文件后,直接在phpstorm终端 npm run [命令缩写] 转载于:https://www.cnblogs...
  • scss转css文件

    千次阅读 2019-01-09 17:29:00
    1.安装scss npm install --save-dev sass-loader npm install --save-dev node-sass 2.执行sass指令 sass a.scss b.css  
  • VScode scss自动转换css

    2021-05-11 22:23:53
    在学优课达的前端时scss文件都是自动转换css的,最近想要把优课达的项目2048小游戏在自己电脑上学习开发一下,才发现原来scss文件是不会自动转化为css的,从网上得到了解决方法在此记录下来 效果如下: 首先下载...
  • scss转换成css,hotcss

    千次阅读 2018-02-06 14:26:00
    编写样式,即sass文件,sass --style compressed style.scss style.css,自动生成css文件  3.监听:sass --watch style.scss:style.css  2.rem和px转换: 根据html的font-size为基准进行设置. html{ ...
  • Vscode中scss文件转css文件的插件 日常使用vue框架,安装“node-sass”即可轻松使用scss。但是官网要求使用jquery写,如果直接写css,效率就会慢很多,发现vscode中有插件...scss转css插件 安装后即可轻松使用。 ...
  • SharpScss是围绕的P / Invoke .NET包装器,用于将SCSS转换为CSS。 基于libsass 3.6.4的版本 产品特点 纯P / Invoke .NET包装器,不涉及C ++ / CLI 支持从字符串或文件转换 支持包括路径 支持源地图 支持libsass在...
  • bulma-scss:Bulma SCSS-Bulma CSS Framework文件转换为SCSS语法
  • 最近在做的新项目用到了nodejs、ECMAScript 6 、Vue.js、SCSS、element-UI的一些东西,这里记录下SASS、SCSSCSS的关系; SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的...
  • SASS、SCSScss的关系

    万次阅读 2016-10-17 11:04:39
    搜索了一下,发现国内很少人认识SASS和SCSS,故在此介绍一下他们。...SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS。   例如: -------
  • PostCSS SCSS语法 用于的解析器。 该模块不编译SCSS。 它只是将mixin解析为自定义规则,并将变量作为属性进行解析,以便PostCSS插件随后可以将SCSS源代码与CSS一起转换。 安装 npm --save install postcss-scss ...
  • //scss目录的scss已经转换为css了 --- --- --- --- --- ---- scss转换 | --- --- --- --- --- ---- --- --- --- --- --- ---- haml转换 | --- --- --- --- --- ---- $ cd\ $ cd haml //haml目录有一个...
  • 后面重新建scss文件保存后自动生成css文件, 成功运行。 所以! 如果你和我一样安装配置好之后还是没运行成功,尝试一下删掉重建。 六、参考 https://zhuanlan.zhihu.com/p/51039055 ...
  • Mac下scss/sass自动转css

    2020-12-22 01:31:04
    vscode安装easy sass
  • scss或者sass转换为css

    2021-01-28 10:38:34
    1.vscode有一个插件 Live sass comppiler 2.右键==》拓展属性==》更改settings.json 3.点击Wacthing sass
  • 找到SCSS后会弹出New Watcher,SCSS选择默认路径即可(c:\Ruby23-x64\bin\scss.bat),mac默认目录是/usr/local/bin/scss,配置好后点击OK即可。 4.在IDEA里面新建scss文件进行测试。 大功告成,开始...
  • 各位大神,想在网上扒个皮肤,有个样式表是scss格式的,里面还有HTML文件,转换过来也有问题,有什么办法可以直接把他隐藏的css文件载下来呢?
  • @import 'conmon.scss';//调用另一个文件的混合宏 ...//语法书写方式不同,sass是以严格形式缩进语法规则来书写,而scss的语法书写和我们的css语法书写方式非常类似 $color:red; $w:100px; $h:height; //mixin混合
  • webstorm配置scss/sass自动转换成css代码 打开webstorm file => settings => File Watchers 添加 scss 在 Arguments 中配置 : 默认配置: $FileName$:$FileNameWithoutExtension$.css 如果想自定义一些配置...
  • <div><p>SCSS需要自己手动来编译。</p><p>该提问来源于开源项目:Mrminfive/hexo-theme-skapp</p></div>
  • CSS是一种非常简单明了的语言,但是当它变得太长时–假设成千上万行,它将变成维护的“噩梦”。 一切都太复杂了,难以维护,我们将迷失要跟上或覆盖哪些样式规则。 因此,创建了CSS预处理器以使编写CSS可编程且更...
  • 4 使用 (1) 单个文件转换为css sass input.scss output.css /.目标sass文件到输出css文件 sass ./sass/a.sass ./css/a.css (2) 监听watch 不需要每次重新启动,自动检测 sass --watch ./sass:./css//监视整个文件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 512
精华内容 204
关键字:

scss转css