Is it necessary for me to consistently run the cmd in order to view sass changes?

Discovering the wonders of Sass has been truly amazing, but I find myself looking for a more efficient way to streamline my coding process. Opening cmd prompt, changing directories, and running sass --watch sass.scss:style.css every time I restart my computer is starting to feel cumbersome.

Is there a permanent solution to avoid this repetitive step in existing projects? And what if I decide to break up my Sass files - do I need to run the command 

sass --watch anotherSass.scss:style.css
each time?

SUMMARIZED: What is the most effective way to monitor changes in .sass files without relying on web-based tools? If manually running the command is the best option, then so be it, but I'm open to any suggestions that can help me eliminate this extra step. Just started exploring Sass today to enhance my workflow, so any insights would be greatly appreciated!

csssass

Answer №1

In my experience, utilizing Compass has streamlined the use of Sass, particularly with its handy modules for tasks like CSS resets, CSS3 properties, and image sprites. Whenever I kick off a new project, I simply run compass init, followed by compass watch, and then proceed to generate the necessary .scss files as needed. Installing Compass itself is a breeze using ruby gems - just fire up gem install compass. This workflow truly embodies efficiency at its finest.

Answer №2

If you want to keep the watcher running without having to manually launch the command each time, you can run it in the background and close your terminal: 

nohup compass watch > compass_log.txt 2>&1 & echo $! > compass_pid.txt

To stop this process, simply use the following command: 

kill -9 `cat compass_pid.txt`

This practice allows you to avoid repeatedly typing "compass watch" every time you need to run the watcher.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to align div elements

I am currently in the process of developing my own custom animation player. Utilizing Three.js for object rendering has been successful so far. However, the challenge lies in incorporating control options at the bottom of the player interface (such as play ...

javascriptjqueryhtmlcss

Achieving alignment of items within nested Grid components in React Material UI

Currently, I am working on building a web page using the React Material UI Grid component. However, I'm encountering an issue with aligning items across nested grids. The current view looks like this: https://i.sstatic.net/bUreX.png What I want is fo ...

cssreactjsmaterial-uigrid

Struggling with integrating sass loader into webpack and ReactJS

Struggling to integrate .scss stylesheets into my ReactJS app using webpack configuration file with css-loader, sass-loader, and style-loader. Successfully imported css into app.js using import './test.css' but facing issues with import './ ...

cssreactjssasswebpacksass-loader

Multiple images overlapping each other in a dynamic parallax effect

Despite my fear of receiving down votes, I have been unsuccessful in finding the answer to my question so I will proceed with asking it. I am attempting to replicate a parallax effect similar to the one showcased on this website, particularly the image of ...

jqueryhtmlcss

Achieving blazing fast CSS rendering in extensive ReactJS projects

What is the best method for efficiently rendering CSS in ReactJs: using custom CSS or the style-component CSS package? ...

javascripthtmlcssreactjsjsx

Adding a slight 1px right margin between an HTML table and its enclosing div in Bootstrap 3

Help! I'm trying to troubleshoot some HTML issues and can't figure out where this pesky 1px gap between my table and the wrapping div is coming from... Just for reference, I am using Bootstrap. I suspect that it could be a glitch in the Bootst ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

There seems to be an issue with Bootstrap's table-hover class causing some trouble. I could really use some assistance in resolving this

I have implemented a website with a floating reload button. Additionally, I have included a table that utilizes Bootstrap's table-hover class. However, when I hover over a row in the table, the table-hover effect highlights the row (refer to Image 1), ...

htmlcssangularbootstrap-4

Characters from Font Awesome are invisible on my screen

I am struggling with the font awesome plugin as I am unable to view the characters. Below is my code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <l ...

cssfont-awesome

Some elements are not responding to margin-top properly

I am facing a problem where 2 elements are not responding to the specified margins of margin: 260px 0 0 0; or margin-top: 260px;. Despite inspecting the elements in IE's dev tools and confirming that the margin is set, the elements appear at the top o ...

htmlcsslayout

A CSS hack for showcasing numerous div elements

I am looking to divide my window into two equal parts, with the same height but each taking up 50% of the width. Here is the CSS I used: .container { display: flex; height : 100%; } .column { flex: 1; height : 100%; } .column-one ...

htmlcssflexbox

Scroll down the box with the page

I need my box to scroll down with the page, but the script I'm using doesn't seem to be working. Here is my code: CSS /* Print and Download Buttons */ #box {top: 271px;} a.print{ background:#ffffff url(images/bg-print.jpg) no-repeat top center; ...

javascripthtmlcss

Switch the navbar background color from see-through to black

On my website, I have set up a navbar navigation that transitions between a transparent background and a black background as the user scrolls down. However, I would like the black background to be present at all times for the navbar. I built the website us ...

htmlcssbootstrap-4

Tips for including a permanent button at the bottom of a material ui dialog box

I want to implement a dialog popup in my react js application. When the user clicks on a button, the dialog should open up. Inside the dialog, there is a form with input fields. After the user fills out all the inputs, they can submit the information by cl ...

javascriptcssreactjsmaterial-uidialog

What is the best way to expand a footer's height to fill the remaining space on the screen?

Any idea how to achieve this look: Creating a footer that stretches to fill the remaining height of the screen at the bottom of the page. Can CSS make this happen? ...

htmlcsslayout

Animate all shapes in SVG to rotate around a central pivot point

I am looking for a simple way to make an SVG graphic rotate around its center point. The rotation doesn't need to be smooth, just a 90 degree turn and back every second. https://i.sstatic.net/H6CTF.png Here is the SVG code: <?xml version="1.0" e ...

cssanimationsvgrotation

Juggling both open and closed menus within a personalized accordion navigation

Check out this basic accordion-style menu: http://jsfiddle.net/JqJce/1/ <ul class="nav level-1"> <li><a href="#">Link</a></li> <li class="has-submenu"><a href="#">Link</a> <ul class="level-2"& ...

jqueryhtmlcss

Incorporate a background only if the specified condition in AngularJS is met, utilizing ng-style

I'm struggling to incorporate a background url style based on a given condition. I tried using data-ng-style, but for some unknown reason, it's not working as expected. I'm not sure where I'm going wrong. data-ng-style="true : {'b ...

javascriptcssangularjs

Attempting to alter the background image through the action of clicking on an image using jQuery, HTML, and CSS

I have created custom weather icons like a sun, cloud, and rainy cloud using Photoshop. My goal is to allow users to click on these icons and change the background image of the website's body. However, despite my efforts, clicking on the images does n ...

javascriptjqueryhtmlcss

The enigmatic "margin-30" element within adaptable layout design

Recently, I decided to challenge myself by learning pure CSS and moving away from relying on Bootstrap for my layouts. The only aspect of Bootstrap I really used was the container class, so I created a basic project to experiment with pure CSS. In this pro ...

htmlcssbootstrap-4

Unexpected issue encountered for identifiers beginning with a numerical digit

Is it possible to select an element from a page with an id that begins with a number? $('#3|assets_main|ast_module|start-iso-date') Upon attempting to do so, the following error occurs: Uncaught Error: Syntax error, unrecognized expression: ...

javascriptjquerycss