Tips for identifying when a change has been made to a SCSS file or any of its partial files

Looking to incorporate sass into a Ruby script but want to compile only when necessary. The typical method for compiling involves using the following code:

require "sass"
Sass::Engine.new(File.read(scss), options).render

By utilizing appropriate hash values for options, we can achieve this. However, my goal is to trigger compilation only if the main scss file or any of its imported partials have been updated.

The key aspect here is leveraging sass caching within the options. Caching stores update information about files in a specific directory. I believe that after executing up to:

engine = Sass::Engine.new(File.read(scss), options)

there should be some data available in the engine object that indicates whether the main scss file or any partials have been modified. Only under these conditions should we proceed with:

engine.render

for the actual compilation process. How can I effectively detect file updates based on the information provided by the sass cache?

Answer №1

To utilize this functionality:

Sass::Engine.for_file(scss, options).render

If a cached parse tree exists in the cache directory for the specific scss file hash, it will be retrieved. For more details on how to use Sass::Engine.for_file, refer to the official documentation at: http://sass-lang.com/docs/yardoc/Sass/Engine.html.

The cache search is carried out within the Sass::Engine#_to_tree method, with the source code accessible here: https://github.com/nex3/sass/blob/stable/lib/sass/engine.rb.

UPDATE

Below are the initial lines of Sass::Engine#_to_tree:

def _to_tree
  if (@options[:cache] || @options[:read_cache]) &&
      @options[:filename] && @options[:importer]
    key = sassc_key
    sha = Digest::SHA1.hexdigest(@template)

    if root = @options[:cache_store].retrieve(key, sha)
      root.options = @options
      return root
    end
  end
  # ...
end

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

Update the CSS for InputLabel

I have a drop-down list that I want to customize. The issue is illustrated below: https://i.sstatic.net/hzVtl.png I'm looking to center the text "choose format" within the field and adjust the font size. return ( <FormControl sx={{ m: 1 ...

Center user input within a div element

I am trying to achieve proper alignment of input elements within a div. When the div is clicked, the input should be displayed; otherwise, a span should be shown instead. Here is my code: <!doctype html> <html lang="en"> <head&g ...

Delete the display:none; attribute to make the item appear on the screen

The following CSS code styles the element: span { position:absolute; float:left; height:80px; width:150px; top:210px; left:320px; background-color:yellow; display:none; //No display ...

Crafting a website in HTML

Hello there! I am looking to create a flexible HTML and CSS page that adjusts in size when the user resizes the browser window. I want the page to be responsive to different resolutions. I've explored various solutions on this platform, but unfortunat ...

JavaScript and modifying the attributes of the nth child

I'm working on a navigation bar that changes the "background-image" of menu items using the nth-of-type CSS selector. Now, I need to figure out how to dynamically change the picture of the "background-image" when hovering over a specific menu item usi ...

Guide to creating a toggle button

Can someone help me create a button that toggles between displaying block and display none when clicked? I've been trying to use Classlist.toggle with JavaScript, but I'm not sure if I have the correct classes targeted. let showCart = documen ...

In Bootstrap 4.4.1, there is a known issue where HTML may not be rendered properly after a certain section

There seems to be an issue with the placement of my buttons section in the markup. It does not appear after the DIV containing the select tag, but it does when placed before it. I have tried moving the buttons section around to troubleshoot, and it does s ...

Struggling to extract the values from a KendoDropDown using Selenium

When using the selenium web driver, we are trying to retrieve a set of option values such as Last 30 days, Last 60 days, etc. Attempts have been made to locate these elements using a CSS selector. var timeperiodcss = "span.k-widget.k-dropdown.k-header se ...

The collapsed form-control is adjusting its attributes while resizing

Having trouble with a website design featuring a collapsed window and menu items, but the search bar is not displaying correctly? In image 3, you can see that the style of the search bar changes when the width exceeds a certain limit. I've tried vario ...

Is it possible to trigger a modal to open automatically after a 3-second delay?

code: <script> $(document).ready(function() { setInterval(function() { $('#contact').modal(); }, 3000); }); </script> html code: <a href="#contact"><h4><i class="fa f ...

Is it possible to generate distance between 2 elements without utilizing padding or margin?

In my React Native project, I'm currently working with 2 inline buttons - the search and add buttons: https://i.stack.imgur.com/tKZrf.png I'm looking to add some spacing between these buttons without impacting their alignment with the left and ...

Making a floating action button in Ionic

I am currently working on creating an action floating button using the Ionic framework. While I have successfully created a basic button, I am now looking to add some stylish effects and make additional buttons appear upon interaction. I understand that th ...

Enhance the appearance of a dropdown selection using CSS

I am interested in customizing the appearance of the first option (Search Clubs) to be bold, while keeping the rest with normal font weight. Currently, I am able to make the first option bold, but it only appears that way after clicking the dropdown menu ...

Conceal DIV containers during the loading of the page, and reveal them only upon the selection of Radio Buttons

In my user interface, I have implemented three radio buttons labeled as "Easy," "Medium," and "Hard." Each button is assigned to a distinct Javascript function that manipulates the visibility of corresponding div elements. The main purpose behind this setu ...

MUI enables the creation of a fixed vertical box anchored at the bottom of the screen

I’ve attempted the following so far: import "./styles.css"; import { Box, Typography } from "@mui/material"; import styled from "@emotion/styled"; export default function App() { const MainStyle = styled("div")(( ...

The issue with setting width using % in React Native is causing trouble

While working on my project using expo react native, I encountered an issue with a horizontal scrollview for images. When I style the images using pixels like this: <Image code... style={{width: 350}}/>, everything works fine. However, if I try to ch ...

Incorporate an onclick event to the elements within the array

I'm currently working on iterating over an array and adding an onclick event to each element. My goal is to be able to click on each div and have them log their values in the console. However, I am facing a challenge in applying the onclick event to e ...

There seems to be an issue with the on() function in jQuery when using mouseover

I am trying to implement a small popup box that appears when I hover over some text, but for some reason it's not working as expected. Can someone please help me troubleshoot this issue? My goal is to display the content from the "data-popup" attribut ...

The header bar intrudes into the main content area

I am in the process of transitioning my landing page design from Bootstrap to Semantic-UI. The layout includes a fixed top navbar and main content split into two columns (3-cols and 9-cols) - the left column is reserved for a sidebar, while the right colum ...

Hide elements on desktop viewport using media queries

If you want to see the code I'm using on my live site, visit www.randolphlibrary.org/mobilesite.htm In short: How can I implement a list-view style for users with a viewport of max-width 768px so that it caters to mobile users? My plan was to add th ...