Scss to css webstorm

Sass and SCSS in Compass applications

Since WebStorm 2020.1, Compass support in the IDE has been deprecated.

However, Compass support is still available through the Compass plugin, which can be installed on the Settings | Plugins page as described in Installing plugins from JetBrains Marketplace.

With Compass support in WebStorm, your Sass or SCSS Style Sheets in Compass applications are compiled into CSS automatically.

Before you start

1. Download and install Ruby.
2. Install and enable the Compass plugin on the Settings | Plugins page, tab Marketplace , as described in Installing plugins from JetBrains Marketplace.
3. Make sure the File Watchers plugin is enabled in the settings. Press Control+Alt+S to open the IDE settings and select Plugins . Click the Installed tab. In the search field, type File Watchers . For more details about plugins, see Managing plugins.

Installing Compass

• In the embedded Terminal ( Alt+F12 ) , type: gem install compass Compass is installed in the folder where Ruby executable file and the gem.bat file are stored.

Creating a new Compass application

If you have no Compass application yet, you can create it or add Compass support to an empty WebStorm project. In either case, a conf.rb configuration file is generated.

• In the embedded Terminal ( Alt+F12 ) , type: compass create
• Create an empty WebStorm project as described in Creating projects, open the embedded Terminal ( Alt+F12 ) , and type:

Activate Compass-aware support in your application

1. Open a .sass or .scss file, click the red bulb next to the @import ‘compass’ statement or press Alt+Enter , and then choose Configure Compass from the suggestion list. Alternatively, in the Settings dialog ( Control+Alt+S ), go to Languages & Frameworks | Style Sheets | Compass .
2. Select the Enable Compass support checkbox, and specify the paths to the Compass executable file and to the conf.rb configuration file.

Starting with an existing Compass application

Open the application sources that are already on your machine

• Click Open on the Welcome screen or select File | Open from the main menu. In the dialog that opens, select the folder where your sources are stored.

Check out the application sources from your version control

1. Click Get from VCS on the Welcome screen. Alternatively, select File | New | Project from Version Control or Git | Clone… from the main menu. Instead of Git in the main menu, you may see any other Version Control System that is associated with your project. For example, Mercurial or Perforce .
2. In the dialog that opens, select your version control system from the list and specify the repository to check out the application sources from. See Check out a project (clone) for details.

Compiling Sass and SCSS

To compile your code automatically, you need to install a compiler and configure a Compass Sass or Compass SCSS File Watcher which will track changes to your files and run the compiler.

You can also use the compiler from the command line or configure it as a third-party tool, see Configuring Third-Party Tools for details.

When you open a file, WebStorm checks whether an applicable File Watcher is available in the current project. If such File Watcher is configured but disabled, WebStorm displays a popup that informs you about the configured File Watcher and suggests to enable it.

If an applicable File Watcher is configured and enabled in the current project, WebStorm starts the compiler automatically upon the event specified in the New Watcher dialog.

• If the Auto-save edited files to trigger the watcher checkbox is selected, the File Watcher is invoked as soon as any changes are made to the source code.
• If the Auto-save edited files to trigger the watcher checkbox is cleared, the File Watcher is started upon save ( File | Save All , Control+S ) or when you move focus from WebStorm (upon frame deactivation).

WebStorm creates a separate file with the generated output. The file has the name of the source Sass or SCSS file and the extension .css . The location of the generated files is defined in the Output paths to refresh field of the New Watcher dialog. However, in the Project Tree , they are shown under the source file which is now displayed as a node.

Create a File Watcher

1. In the Settings dialog ( Control+Alt+S ), click File Watchers under Tools . The File Watchers page that opens shows the list of already configured File Watchers.
2. Click or press Alt+Insert . Depending on the tool you are going to use, choose the compass sass or compass scss predefined template from the list. The New Watcher dialog opens.
3. In the Program field, specify the path to the executable file:
   • compass.bat for Windows
   • compass for Unix and macOS
4. In the Arguments field, type one of the following depending on the operating system used:

• compile $UnixSeparators($ProjectFileDir$)$ to process an entire directory
• compile $UnixSeparators($FilePath$)$ to process a single file

• compile $ProjectFileDir$ to process an entire directory
• compile $ProjectFileDir$ $FilePath$ to process a single file

• compile $ProjectFileDir$ to process an entire directory
• compile $ProjectFileDir$ $FilePath$ to process a single file

Источник

Code Style. SCSS

Use this page to configure formatting options for SCSS files. When you change these settings, the Preview pane shows how this will affect your code.

Tabs and Indents

• If this checkbox is selected, tab characters are used:
  • On pressing the Tab key
  • For indentation
  • For reformatting code

  An indentation consists of two parts. One part results from nesting code blocks, and the other part is determined by alignment.

  • If this checkbox is selected, the part that results from nesting contains both tabs and spaces (if necessary), while the part defined by alignment consists only of spaces.
  • If this checkbox is cleared, only tabs are used. This means that after reformatting a group of spaces that fits the specified tab size is automatically replaced with a tab, which may result in breaking fine alignment.

  The Smart Tabs checkbox is available if the Use tab character checkbox is selected.

  In this field, specify the number of spaces that fits in a tab.

  In this field, specify the number of spaces to be inserted for each indent level.

  In this field, specify the number of spaces to be inserted between the values of properties.

  Keep indents on empty lines

  If this checkbox is selected, WebStorm retains indents on empty lines as if they contained some code. If the checkbox is cleared, WebStorm deletes the tab characters and spaces on empty lines.

  Blank Lines

  Use this tab to define where and how many blank lines you want WebStorm to retain and insert in your code after reformatting. The results are displayed in the Preview pane.

  The settings on this tab do not affect the number of blank lines before the first and after the last item.

  In this area, specify the number of extra blank lines to be kept after reformatting.

  In this area, configure whether to have or not to have extra empty lines around top-level blocks and nested selectors. In the field next to each option, specify the minimum number of extra blank lines to be left.

  Other

  In this tab, specify the alignment, braces, spaces, and quotes options to be applied on reformatting.

  Use this list to specify where WebStorm should place the opening braces of selectors. The available options are:

  Use this list to specify how WebStorm should align attributes and values. The available options are:

  • Do not align : select this option to specify alignment on the first character of an attribute name.
  • On value : select this option to specify alignment on the first character of the value of an attribute.
  • On colon

  In the CSS, SCSS, and Less context, WebStorm by default uses double quotes for generated string literals in import statements and URLs. To use single quotes, select Single from this list.

  To apply the chosen style to the entire file after reformatting, select the Enforce on format checkbox below the list.

  Currently changing the configuration for quotation marks does not affect injected style sheets and CSS code inside the tags.

  Align closing brace with properties

  If this checkbox is selected, the closing brace of the selector will be placed under the list of properties.

  If this checkbox is not selected, the closing brace of the selector will be placed under the selector.

  If this checkbox is selected, the blocks with a single property will be confined to one line.

  If this checkbox is not selected, each property will be placed to its own line.

  Select the checkboxes in this area to add a space after the colon delimiting key and value, and before the opening brace of the selector.

  Use the controls in this area to configure positioning of line and block comments and spaces inside them.

  • Line comment at first column : select this checkbox to start line comments at the first column. When the checkbox is cleared, line comments are aligned in the code.
  • Add a space at line comment start : when this checkbox is selected, a space will be inserted between a line comment character and the first character of a commented line.
  • Add spaces around block comments : select this checkbox to add leading and trailing spaces in block comments. By default, when you enclose a code fragment in a block comment, the text starts right after the opening /* characters without any spaces. Before the closing */ characters no space is inserted either. This default code style may conflict with some linters’ rules, for example, ESLint.

  Use this area to configure the hex color syntax. You can select from the following check options:

  • Convert hex colors to : select this checkbox to configure the hex color letter case. You can choose Lower case or Upper case .
  • Convert hex colors format to : select this checkbox to configure the hex color format length. You can choose Long format or Short format .

  View changes in the Preview pane.

  Arrangement

  In this tab, enable sorting of CSS properties in SCSS files, which is by default turned off, and select the sorting order.

  • To enable sorting, select the Sort CSS properties checkbox.
  • Select By name to have all CSS properties within each block reordered alphabetically. WebStorm ignores vendor-specific prefixes but keeps multiple vendor-specific prefixes for a certain property alpha-sorted.

  border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black;

  To sort all CSS properties in a SCSS file

  • From the main menu, select Code | Rearrange Code .
  • Alternatively, select Code | Reformat File from the main menu, and then select Whole file and Rearrange code in the dialog that opens.

  To sort CSS properties within a block

  • Select the block to sort and then select Code | Rearrange Code from the main menu.
  • Alternatively, select Code | Reformat File on the main menu, and then select Rearrange code in the dialog that opens.

  Set from

  The link appears in the upper-right corner of the page, when applicable. Click this link and choose the language to be used as the base for the current language code style.

  To return to the initial set of code style settings and discard the changes, click Reset .

  Источник

  Читайте также:  Html print landscape css