Sass convert css to sass

Converting CSS to SASS in Rails Project

As an exercise to flex and practice my SASS skills, I recently converted the CSS in one of my projects to SASS. Did this project need the conversion? Ehh, probably not. I’m only using one stylesheet and it’s less than 300 lines, but converting a smaller stylsheet is great practice for a larger project.

Getting Started

My YellowBitRoad application is running Rails 6, so the sass-rails gem was shipped with Rails. I had dumped all of my CSS into application.css. To start the conversion to SASS, I created a new stylesheet /app/assets/stylesheets/style.scss. All stylesheets included in app/assets/stylesheets will be compiled and used in your application. In your Rails application, you’ll see comments at the top of application.css explaining how stylesheets are incorporated. You’ll also see a suggestion to split up your CSS, and see .scss files created for each model generated with the rails g model command. For my purposes, it doesn’t make sense to split up such a small file, so I’m going to put everything into one stylesheet.

Color Palette

One of the most convenient things about SASS, to me, is not having to remember, look up, copy and/or paste HEX codes. Also, do you know what color #01BAEF is? Maybe you do, but I have no clue. I love picking out a color palette for my application, I don’t like having to remember HEX or RGB codes or what colors they represent. My first step in the conversion was saving all my theme colors as variables, and them implementing those variables throughout my stylesheet. CSS: Before

nav, footer background: #04724D; height: 70px; width: 100%; > a  color: #04724D; font-weight:bold; > 

$dark_green: #04724D; $light_green: #16DB65; $yellow: #FFD23F; $red: #B80c09; $light_blue: #01BAEF; body margin: 0;> nav, footer background: $dark_green; height: 70px; width: 100%; > a  color: $dark_green; font-weight:bold; > 

Hooray! That was exceedingly easy, and now I can decide to change my entire color palette if I would like. I can also remember color names a lot easier than HEX codes, so I don’t have to keep referencing previous style rules when writing more CSS. If there is a good chance you’ll change your theme colors entirely, you may want to choose more generic variables names ($main_color, $secondary_color, etc.) so you can change the HEX values and still have variables that make sense for your fellow devs and your future self.

Nesting

Next I tackled nesting my separate style rules where I could. For my project, this made a lot of sense for my nav and footer elements. Anywhere I had a rule for a child element of nav or footer (really apparent in my CSS as I referenced those parent elements), I converted the separate rules into my two new nested rules. I also used the opportunity to nest some rules where I didn’t reference the parent element, but used an ID for their children. Before: CSS

 nav, footer background: #04724D; height: 70px; width: 100%; > nav  position:fixed; top: 0; > nav ul  text-align:right; margin: 0 auto; width:85%; > nav ul li  display:inline-block; margin-right:25px; line-height:70px; > nav a, footer input  color:white; text-decoration: none; font-family: 'Roboto Slab', arial, sans-serif; font-size:20px; margin-bottom: 10px; > nav a:hover border-bottom: 1px solid white; > footer  padding-top: 20px; padding-left: 20px > footer input  color: white; border: none; background: none; > #branding color: #fff; display: inline-block; float:left; line-height: 70px; > #nav-items  width:85%; margin: 0 auto;; > 

nav  position:fixed; top: 0; background: $dark_green; height: 70px; width: 100%; ul  text-align:right; margin: 0 auto; width:85%; li  display:inline-block; margin-right:25px; line-height:70px; > > a  color:white; text-decoration: none; font-family: 'Roboto Slab', arial, sans-serif; font-size:20px; margin-bottom: 10px; > a:hover border-bottom: 1px solid white; > #nav-items  width:85%; margin: 0 auto; > #branding color: #fff; float:left; line-height: 70px; > > footer  padding-top: 20px; padding-left: 20px; background: $dark_green; height: 70px; width: 100%; input  color: white; border: none; background: none; text-decoration: none; font-family: 'Roboto Slab', arial, sans-serif; font-size:20px; margin-bottom: 10px; > > 

Now, we’ve had to repeat some styles here, in the outer footer and nav nested rules, but I’m okay with that. It’s minor, and now I can visually see all the style rules that affect these two parent elements and their children. Converting the a smaller CSS file to SASS is great practice. Do you use SASS, CSS or both? Have you ever converted a large project from one CSS to SASS? Let me know!

Источник

Convert Your CSS Code to SCSS/Sass

The Sass Ruby Gem ships with a sass-convert executable. Its quite funny that many people still do not know about it or get confused thinking that its for SCSS -> Sass and Sass -> SCSS conversion. Well, after all SCSS is CSS, right ?

This command will help you convert your CSS code to Sass or SCSS:

What’s the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.

sass-convert style.css style.sass sass-convert style.css style.scss

style.css should be an existing CSS file, while style.sass and style.scss files will be generated if they don’t exist.

In Ruby Code

I quickly dig into the sass gem and tried to figure out what sass-convert basically does, so that one could also implement the exact same functionality in plain Ruby Code (it can be really useful sometimes). Here’s what I came up with:

require 'sass/css' # CSS Code css = %Q < body < color: red; >> # SASS puts ::Sass::CSS.new(css).render(:sass) # SCSS puts ::Sass::CSS.new(css).render(:scss)

Downsides

If I am not wrong, I don’t think the conversion preserves any variables, mixins, inheritance, etc. Although nesting is added appropriately. So, the result might not be spot on always, but can still be a time saver sometimes.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Источник

Web Design: How to Convert CSS to Sass & SCSS

CSS is a really simple and straightforward language, but when it is getting too long – let’s say for a thousand of lines, it turns into a maintenance ‘nightmare’. Everything will be too complicated to maintain, and we will get lost with which style rules to keep up with or overwrite. For that reason, a CSS Pre-processor is created to make writing CSS programmable and more maintainable.

One that is popular among developers and designers is Sass, which we have covered previously in posts like:

If you have just made the swap from CSS to Sass, you might be thinking to convert your old CSS into Sass or SCSS. Well, if that is the case, you can use a third-party tool called css2sass.

How to Convert Old CSS to LESS

We have covered much of the basics for LESS in our previous posts. If you have been following. Read more

Using CSS2SASS

This tool is simple and intuitive – I might not even have to tell you how to use it but, for demonstration purpose, we will run a few tests with the tool. First, given the following CSS codes:

header .nav < margin-top: 100px; >header .nav li < margin-left: 10px; >header .nav li a

We would like to convert it into Sass syntax, which is turned into:

header .nav margin-top: 100px li margin-left: 10px a height: 30px line-height: 10px

The style rules are now nested under preceding selectors using indentation to distinct the cascading level. If we convert it into SCSS syntax the cascade will be differentiated with curly brackets, just like in CSS.

The Same Style Rules

Let’s give it another try. This time, we have the following two selectors with the exact same style rules, and we will covert it into Sass syntax.

The generated output is quite clever, this tool concatenate the selectors in a single line, and separate them using a comma, as follows.

.footer, .copy color: #b3b3b3 background-color: #fafafa

Although, this is not what I’ve actually expected. It would be better if the output was in Selector Inheritance, probably to be something like in the code below.

.inherit1 color: #b3b3b3 background-color: #fafafa .footer @extend .inherit1 .copy @extend .inherit1

Pseudo-class and Selector Combination

Lastly, we would like to try converting some style rules with :hover pseudo-class and the selector combination, as shown below.

The output is as expected. This tool nests the pseudo-class and the selector combination with & sign, like so.

.button &:hover color: #ffffff background-color: #bf813d &.active background-color: #986731

Room for Improvement

This tool has some limitations in recognizing our CSS cascading structure to convert them appropriately into Sass or SCSS syntax. But, there is certainly room for improvement.

I am not quite sure whether it is possible to integrate Compass to this conversion tool. It would be just great, if we were able to convert the following CSS3 @font-face rule:

…into Compass @font-face mixin, as follows

@include font-face("DroidSansRegular", font-files("DroidSansRegular-webfont.ttf", "DroidSansRegular-webfont.otf", "DroidSansRegular-webfont.woff"), "DroidSansRegular-webfont.eot", normal);

But, in general this tool is one of a many good places for those who are just getting started with Sass. Convert your old CSS and you will see how it is constructed in Sass or SCSS syntax.

Источник

Online CSS to SASS Converter

This free online tool allows you to convert CSS files to SASS format files.

Categories

Input

Output

A tool called CSS to SASS converter aids developers in converting CSS files into SASS files. Syntactically Awesome Style Sheets, or SASS for short, is a preprocessor scripting language that enhances CSS with features like variables, nesting, and mixins. By offering a complete set of features, it seeks to make CSS more scalable and maintainable.

Many organizations are switching to SASS as their primary CSS preprocessor as it is growing in popularity among front-end developers. However, converting CSS files into SASS can be laborious and time-consuming, especially for big projects with lots of CSS files.

A CSS to SASS Converter automates this process by taking CSS code as input and producing SASS code as output. This allows developers to easily migrate their CSS code to SASS without having to rewrite each line of code manually.

What is a CSS to SASS converter?

A CSS to SASS converter is a tool that helps developers convert their CSS code into SASS code. SASS, which stands for Syntactically Awesome Style Sheets, is a CSS preprocessor that adds features such as variables, nesting, and mixins to CSS.

Why would I need to use a CSS to SASS converter?

Converting CSS code to SASS manually can be tedious and time-consuming, especially for larger projects. A converter automates this process and saves time while helping to improve the organization and maintainability of the code.

How does a CSS to SASS converter work?

A CSS to SASS converter works by parsing the CSS code and converting it into SASS syntax. It may use regular expressions, custom algorithms, or existing libraries to perform this conversion.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Источник