What is the best way to automate the stylus pen for a static web page?

I am currently using Stylus to generate my CSS file. To take advantage of the CSS3 vendor prefix and other features, I have incorporated the nib package.

My website is static and does not rely on Express or any server. Now, I need to automatically run the nib package whenever the .styl file is modified.

Currently, I manually run the following command:

stylus -u nib screen.styl - it works effectively. However, I would prefer not to have to run this command every time I make changes to the .styl file.

Is there a way to automate this process? Or are there any alternative solutions available?

Here is a sample CSS for the aforementioned command:

@import 'nib'

#comments
    border-radius 4
    box-shadow 0 9 1px black

    p
        opacity 0.75

.seeen
    border-radius 4

#slogan
    hide-text()

Answer №1

To continuously watch for changes in your Stylus files, you can add the --watch flag (or simply use -w):

stylus -u nib -w screen.styl

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

Is your background image not filling the entire page?

Just diving into the world of HTML and CSS (with a touch of Bootstrap), I've set out to create a basic scrolling webpage. However, I've hit a roadblock with the background image not covering the full height of the page. It seems to stop at the h2 ...

Unable to get focus() function to work properly

I'm working with the following jQuery code snippet: $('#newStep2 input#name').focus().css('background','Red'); The intention here is to set focus on a textbox with the ID #name. I added the background color change as a ...

Prevent selection of any dates before the most recent 2 days on the jQuery datepicker

Is there a way to restrict the date-picker from displaying past dates, except for the last 2 dates? <link href="Content/jquery-ui-1.8.23.custom.css" rel="stylesheet" /> <script src="Scripts/jquery-1.8.1.min.js"></script> <script src=" ...

What is the best way to adjust the background when the keyboard disappears?

I am currently developing an Android application using PhoneGap. I have encountered an issue where, after entering text in a textbox and hiding the keyboard, there is a delay in adjusting the background screen. When the keyboard is hidden, a white area app ...

The background image on my CSS is not showing up

I just added the file to my git repository and shared the link here. Is there a specific way to do this? html{ background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg"); } ...

Ensuring jQuery filter() works seamlessly with Internet Explorer versions 6, 7, and 8

On my webpage, I have implemented an ajax call using the jQuery library to handle a specific task. After making the ajax call, I need to parse the response message that is returned. However, I encountered an issue with Internet Explorer versions 6, 7, and ...

Enhance your AngularJS skills by incorporating multiple conditions into the ternary operations of ng-class

I am struggling to apply multiple classes when the condition in the ng-class attribute evaluates to true. Here is the code I have attempted so far, but it doesn't seem to be working: <div class="col-md-4" ng-mouseover="hoverButton=true" id="plai ...

Concerns with JQuery UI autocomplete: Limited search results available

I'm in the process of developing a search engine using JQuery UI autocomplete feature. The data is stored in a mysql database. While the search query does return some results, it fails to generate a satisfactory number of matches. When I run a search ...

Utilizing Jquery for Enhancing Annotations

I am in the process of developing a website for essay writing tests. I have implemented a feature where users can input their essays using a text area, and now I want to be able to make comments on that text similar to PDF annotations or highlighting. I at ...

Getting rid of the background color and style attribute on a webpage

I have a complete HTML page, but now I need to make several changes: First, I want to remove all the bgcolor and style attributes from the tables and body tags. I am attempting it like this: $('#container').find("table").removeAttr("style"); ...

The footer is floating somewhere in the middle of the page, not at the bottom

Currently working on a webpage with the Twitter Bootstrap Framework. The footer is supposed to be at the bottom of each page with lots of content, but on one sub-page it's appearing in the middle instead: http://gyazo.com/45232ab25cdeb7705f9775a969051 ...

Change occurring within a cell of a table that has a width of 1 pixel

In the code snippet below, there is a transition inside a table cell with a width of 1px to allow it to wrap its content. However, the table layout changes only at the end or beginning of the transition: var animator = document.getElementById("animator" ...

Learn the steps to activate on-page editing feature!

Is there a way to make a section of a webpage editable when a button is clicked? (e.g. edit & view on the same page) For instance, imagine you could click "edit" on this very page (the one you are currently reading), and the title and content become edita ...

The Impact of CSS Border Width on the Size of a PHP Form

Creating a PHP form with a tabbed box has been quite the challenge. With 3 tabs, each requiring different field inputs, I set out to add a border around the form headings and tabs. The border looks great, but it poses a problem - its width spans the entire ...

The functionality of the offcanvas button is not working correctly

I am currently utilizing the newest Bootstrap version of Offcanvas. Interestingly, there seems to be an issue with the close button functionality. When I click the "Add to Cart" button, the offcanvas displays properly. However, the "Add to Cart" button its ...

AngularJS and Rails causing page to refresh when removing an image

I am a newcomer to AngularJS and encountering an issue with page reloading when removing images. If I delete images while maintaining the stack order, everything works fine. However, if I remove an image from in between others, the page reloads. Snippet o ...

"Utilizing the ng-class directive in AngularJS to apply multiple

I have been attempting to utilize the ng-class directive in AngularJS based on a certain condition: if a JSON value is 1, it should display as green; if it's 2, red; and if it's 0, white. However, I am unable to achieve the desired result for som ...

Google Chrome successfully transmits two variables with AJAX, whereas Mozilla Firefox does not send them

Having an issue with sending two values through ajax - currently only one value is being sent in Mozilla browser. Ajax script: $('#post_submit').click(function() { event.preventDefault(); var great_id = $("#post_container_supreme:first").attr(" ...

Adjustable width for flexbox column

Is there a way to adjust the width of the first flex column so that it only takes up the space of its content? .flex { display: flex; } .inside { flex: 1; border: 1px solid #000; } <div class="flex"> <div class="inside inside-left"& ...

Obtaining the name of the image that has been uploaded using jQuery

//Image upload function $(function() { $(":file").change(function() { if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); } }); }); function im ...