Scss to css mac os

Установка Sass

Приложения

Есть множество приложений под Windows, Mac и Linux, которые помогут в освоении и работе с Sass. Большинство из них бесплатные, но некоторые из них все-таки платные (но это того стоит).

• CodeKit (Платно) Mac
• Compass.app (Условно-бесплатно) Mac Windows Linux
• Ghostlab (Платно) Mac Windows
• Hammer (Платно) Mac
• Koala (Бесплатно) Mac Windows Linux
• LiveReload (Условно-бесплатно) Mac Windows
• Prepros (Платно) Mac Windows Linux
• Scout-App (Бесплатно) Windows Linux Mac

Командная строка

Когда вы используете Sass через командную строку, то для того, чтобы запустить компиляцию .sass и .scss в .css файлы введите команду sass . Например:

Используя любой способ установки Sass, запустите команду sass —version чтобы быть уверенным, что установка прошла успешно. Если эту команду выполнить, то в ответ вы получите версию Sass 1.5.1 . Также вы можете запустить команду sass —help для получения информации по использованию Sass в командной строке.

Как только все настроено, начинайте наслаждаться. Если вы впервые столкнулись с Sass, то специально для вас мы создали несколько ресурсов для обучения.

Установка в любом месте (Standalone) Вы можете установить Sass в Windows, Mac, или Linux путем скачивания дистрибутива для вашей операционной системы from GitHub и выполните действия с PATH . Вот и все: никаких зависимостей нет и ничего не нужно устанавливать дополнительно. Установка в любом месте (npm)

Если вы используете Node.js, то вы можете установить Sass c помощью npm:

Однако, учтите, что это установит реализацию Sass на нативном JavaScript, которая работает несколько медленнее, чем другие реализации, перечисленные здесь. Но он имеет тот же интерфейс, поэтому будет легче поменять на другую реализацию позже, если вам потребуется немного больше скорости! Установка в Windows (Chocolatey)

Если вы используете менеджер пакетов Chocolatey для Windows, вы можете установить Dart Sass при помощи команды:

Установка в Mac OS X (Homebrew)

Если вы используете менеджер пакетов Homebrew для Mac OS X, вы можете установить Dart Sass при помощи команды:

Источник

Install Sass

Applications

There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps (and totally worth it).

• CodeKit (Paid) Mac
• Ghostlab (Paid) Mac Windows
• Hammer (Paid) Mac
• LiveReload (Paid, Open Source) Mac Windows
• Prepros (Paid) Mac Windows Linux
• Scout-App (Free, Open Source) Windows Linux Mac

Command Line

When you install Sass on the command line, you’ll be able to run the sass executable to compile .sass and .scss files to .css files. For example:

First install Sass using one of the options below, then run sass —version to be sure it installed correctly. If it did, this will include 1.43.1 . You can also run sass —help for more information about the command-line interface.

Once it’s all set up, go and play. If you’re brand new to Sass we’ve set up some resources to help you learn pretty darn quick.

Install Anywhere (Standalone) You can install Sass on Windows, Mac, or Linux by downloading the package for your operating system from GitHub and adding it to your PATH . That’s all—there are no external dependencies and nothing else you need to install. Install Anywhere (npm)

If you use Node.js, you can also install Sass using npm by running

However, please note that this will install the pure JavaScript implementation of Sass, which runs somewhat slower than the other options listed here. But it has the same interface, so it’ll be easy to swap in another implementation later if you need a bit more speed! Install on Windows (Chocolatey)

If you use the Chocolatey package manager for Windows, you can install Dart Sass by running

Install on Mac OS X or Linux (Homebrew)

If you use the Homebrew package manager for Mac OS X or Linux, you can install Dart Sass by running

Sass © 2006–2021 the Sass team, and numerous contributors. It is available for use and modification under the MIT License.

Источник

How to compile or convert sass / scss to css with node-sass (no Ruby)?

I was struggling with setting up libsass as it wasn’t as straight-forward as the Ruby based transpiler. Could someone explain how to:

1. install libsass?
2. use it from command line?
3. use it with task runners like gulp and grunt?

I have little experience with package managers and even less so with task runners.

4 Answers 4

I picked node-sass implementer for libsass because it is based on node.js.

Installing node-sass

• (Prerequisite) If you don’t have npm, install Node.js first.
• $ npm install -g node-sass installs node-sass globally -g .

This will hopefully install all you need, if not read libsass at the bottom.

How to use node-sass from Command line and npm scripts

1. $ node-sass my-styles.scss my-styles.css compiles a single file manually.
2. $ node-sass my-sass-folder/ -o my-css-folder/ compiles all the files in a folder manually.
3. $ node-sass -w sass/ -o css/ compiles all the files in a folder automatically whenever the source file(s) are modified. -w adds a watch for changes to the file(s).

More usefull options like ‘compression’ @ here. Command line is good for a quick solution, however, you can use task runners like Grunt.js or Gulp.js to automate the build process.

You can also add the above examples to npm scripts. To properly use npm scripts as an alternative to gulp read this comprehensive article @ css-tricks.com especially read about grouping tasks.

• If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
• Add «sass»: «node-sass -w sass/ -o css/» to scripts in package.json file. It should look something like this:

• $ npm run sass will compile your files.

How to use with gulp

• $ npm install -g gulp installs Gulp globally.
• If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
• $ npm install —save-dev gulp installs Gulp locally. —save-dev adds gulp to devDependencies in package.json .
• $ npm install gulp-sass —save-dev installs gulp-sass locally.
• Setup gulp for your project by creating a gulpfile.js file in your project root folder with this content:

A basic example to transpile

Add this code to your gulpfile.js:

$ gulp sass runs the above task which compiles .scss file(s) in the sass folder and generates .css file(s) in the css folder.

To make life easier, let’s add a watch so we don’t have to compile it manually. Add this code to your gulpfile.js :

All is set now! Just run the watch task:

How to use with Node.js

As the name of node-sass implies, you can write your own node.js scripts for transpiling. If you are curious, check out node-sass project page.

What about libsass?

Libsass is a library that needs to be built by an implementer such as sassC or in our case node-sass. Node-sass contains a built version of libsass which it uses by default. If the build file doesn’t work on your machine, it tries to build libsass for your machine. This process requires Python 2.7.x (3.x doesn’t work as of today). In addition:

LibSass requires GCC 4.6+ or Clang/LLVM. If your OS is older, this version may not compile. On Windows, you need MinGW with GCC 4.6+ or VS 2013 Update 4+. It is also possible to build LibSass with Clang/LLVM on Windows.

Источник

How to convert directory SASS/SCSS to CSS via command line?

But this only converts css to SASS, and I want the other way around.

Then I looked at the sass command, but it doesn’t look like I can pass it a directory.

6 Answers 6

To do a one-time Sass compile instead of a watch , you can do this from the command line:

To have Sass import one file (usually a partial, with a _ starting the filename), you can do this inside a Sass file:

This way, Sass knows where you want the include to occur.

By default, Sass can’t import an entire directory. The Sass Globbing gem, however, can. You can install it from the command line:

And then watch with it:

Note that globbing will import files alphabetically, so be sure your CSS will cascade appropriately if this occurs.

Use the sass command followed by the input file name and path , a colon ( : ) and the desired output file name and path . If the output file does not already exist Sass will generate it. For example,

However, this is a one-off command that would require being run every time you want to generate a new CSS file. A simpler and handier method is to use Sass’s built-in —watch flag. This watches for changes to your Sass file and automatically runs the compile command each time you save changes.

If you have multiple Sass files within a directory you can watch for changes to any file within that directory:

Sass also has four CSS output styles available: nested , expanded , compact and compressed . These can be used thus:

Источник

scss-to-css

yutent

scss-to-css

It can be used for simple compilation/compression of scss files without installing various front-end engineering tools (webpack, etc.).

Live demo:

Why Scss-to-css

For small projects, various engineering tools such as webpack are too heavy and cumbersome to configure. And a lot of modules have to be installed. Sometimes, we just want to simply use the convenience brought by scss. So for this purpose, I wrote a vsc plug-in, which can be automatically compiled into a css file (stored in the current directory by default) when the scss file is saved, and the browser prefix is ​​automatically completed.

Configuration

Some configuration can be set, which it works better for you。

• compileOnSave : Auto compile on document saved, default true
• autoPrefixer : Will autoprefixer. It can be run faster when turn off. default true
• output : Output style. default compressed 。
• exclude : The RegExp of path what you can to ignore(the var.scss file will never be compiled)。

Issues

This extension work well on all os. If any problem please let me known issue

Dependencies

We use node-sass (Deprecated in 3.1.0) instead of libsass .

v3.1.0 uses sass instead. No need to install node-sass globally

• node-sass , You need to install this module manually. Maybe root is required on linux.

Installation

Search scss-to-css and install in the marketplace.

.browserslistrc DEMO (Deprecated in 2.x)

Just for demo, you can change it by youself. If not exists, the default value will be last 2 version .

.scssrc DEMO (in 2.x or above)

instead of using .browserslistrc , we recommend to use .scssrc .

Источник