How to use SCSS In CSS

Using Plain CSS

SCSS (Sass) is a preprocessor that extends CSS with features like variables, mixins, and nesting. These features make your stylesheets more maintainable, reusable, and easier to read.

1. Create SCSS File: Start by creating a new file with the .scss extension in the app/assets/stylesheets directory.

2. Import Bootstrap (Optional): If you’re using Bootstrap for pre-built styles, import it into your SCSS file using @import “bootstrap“;

3. Write SCSS Styles: Add your custom styles to the SCSS file. Utilize features like variables, mixins, and nesting for better organization:

application.scss

CSS

      body {
        font-family: "Arial", sans-serif;
        background-color: #b6d3f1;
      }
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      p {
        font-size: 20px;
      }

4. Link SCSS File: In your application layout file (usually app/views/layouts/application.html.erb), use the stylesheet_link_tag helper to link the SCSS file:

<%= stylesheet_link_tag ‘application’, media: ‘all’, data: { turbolinks: false } %>

Below example shows the content of app/views/layouts/application.html.erb:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Rails App with SCSS</title>
  <%= stylesheet_link_tag 'application', media: 'all', data: { turbolinks: false } %>
</head>
<body>
  <div>
      <p>Welcome to Ruby and Rails application</p>
    </div>
  </body>
</html>

Output:

Output

How to Add CSS in Ruby on Rails?

This article focuses on discussing how to add Cascading Style Sheets (CSS) in Ruby on Rails.

Table of Content

Using SCSS
Using Plain CSS
Using Inline Styles
Using External CSS Frameworks
Comparison of Different Approaches
Additional Considerations
Conclusion

How to use SCSS In CSS

How to Add CSS in Ruby on Rails?

Similar Reads

Contact Us