Working with both SASS and Stylus has been quite challenging for me, especially when trying to append elements to a list.
Here's an example:
$names: adam john wynn mason kuroir
.photos
@each $name in $names
.photo-#{$name}
background: image-url("avatars/#{$name}.png") no-repeat
I'm interested in including my name in the $names list without needing to re-enter all the currently listed names. Is there a way to do this?
The corresponding command in Stylus is push()
names = (adam john wynn mason kuroir)
names = push(names, myname)
For more information, check out this link
Exploring the capabilities of Stylus, I set out to replicate a standard CSS list of selectors with uniform properties such as (example 1)
.col-01, .col-02, .col-03 { display : block }push() function. However, this approach encounters issues when attempting the following:
sizes = small medium large
for size, i in sizes
for num in ( 1..12 )
columns = push( .column-{size}-{num} )
Instead, by structuring the code as follows:
sizes = small medium large
for size, i in sizes
for num in ( 1..12 )
.column-{size}-{num}
display block
float left
The functionality is achieved, albeit generating verbose compiled CSS.
.column-small-1 { display: block; float: left }
.column-small-2 { display: block; float: left }
.column-small-3 { display: block; float: left }
etc
An alternative method using Stylus' @extend feature can emulate example 1, although with some workaround involved:
.column
float left
sizes = small medium large
for size, i in sizes
for num in ( 1..12 )
.column-{size}-{num}
@extend .column
This technique successfully reproduces the intended output.
EDIT:
To differentiate a class declaration, utilize $ instead of . — preventing the original class from generating any compiled css
$column
float left
sizes = small medium large
for size, i in sizes
for num in ( 1..12 )
.column-{size}-{num}
@extend .column
When using Sass, the append method can come in handy:
Here are some examples of how to use it:
append(10px 20px, 30px) => 10px 20px 30px
append((blue, red), green) => blue, red, green
append(10px 20px, 30px 40px) => 10px 20px (30px 40px)
append(10px, 20px, comma) => 10px, 20px
append((blue, red), green, space) => blue red green
Check out this Stylus code snippet for achieving the desired result:
people = (michael jessica andrew emily sophia)
.avatars
for person in people
.avatar-{person}
background: image-url("profiles/%s.png" % person) no-repeat
UPDATE: I mistakenly misinterpreted the question. Unfortunately, I am unsure how to append to the list using either Stylus or SASS.
Printer Model: TM-T88V User Manual: Receipt-marker Web template for the printer: (Provided by Epson) I'm completely new to computer languages and have been trying to understand how to print receipts. I've researched XML, HTML, CSS, and Jav ...
GitHub has recently introduced a new functionality where if you are browsing a page as a guest in one tab and then log in from another tab, the tab where you are still a guest will show a specific message. This feature also functions in incognito or privat ...
Can dynamic image resizing be achieved through CSS or does it require HTML coding? ...
Hey there! I'm currently working on a new menu design using UL and LIs elements. I would really appreciate some advice on how to add lines after each LI and properly indent them with the specific bullet image I have chosen. If you're interested ...
Check out my CodePen example here - Code In this demo, I have a table inside a container where the table is larger than the container. As you scroll horizontally, both the table and headers move accordingly. However, when scrolling vertically, I want th ...
I need to save various input values in a MySQL database, such as first name, last name, phone number, and mobile number. With a select query, I can retrieve all the entries from the database and display them on a single webpage. When a user clicks on a sp ...
I am facing an issue with my div container (mapInfo-Container) which contains multiple div blocks. I want the container to have a fixed height of 250px, and be scrollable for any content exceeding this height. Here is the code snippet: http://jsfiddle.net ...
Hey there, I have a small issue with some HTML divs and show/hide functionality. I'm trying to make it so that only one div is shown per click, but my current jQuery code is showing all the divs at once. Any suggestions on how to fix this? Check ou ...
When a user visits the mobile version of the website or scales the webpage, the Bootstrap navbar will no longer remain fixed at the top. I am looking to set it as a normally scrolling view in the navbar. The Bootstrap class is "navbar-fixed-top" https:// ...
I'm currently facing an issue with a layout that seems simple I am working on a design featuring 4 headline boxes. In the "desktop" view, all 4 boxes need to be of equal height. The same applies when viewed across 2 boxes in the "tablet" mode. Howeve ...
I am currently working on an auto slide feature and could use some guidance with setInterval(). From my understanding, setInterval() is used to repeat functions infinitely, which is exactly what I need for this project. Here is the current layout: HTML & ...
I have created a webpage that I really enjoy, but now I need to ensure it supports smaller resolutions like 1020X768. However, for those with larger monitors, I want to take advantage of the extra space by setting a minimum width that can grow with the scr ...
I want to create a tooltip that changes its innerHTML and fades in when an input on my form is focused. Additionally, I need to check if the tooltip has been faded in as it initially loads faded out. In essence, I am looking to switch the tooltip content ...
Here is the CSS code I am using: .nav li a { background-color:#000; color:#fff; text-decoration:none; padding:10px 15px; display:block; } .nav > li { float:left; } .nav li a:hover { background-color:#4db4fa; } .nav li ul { ...
Looking to integrate Appreplica on my website for embedding content, but struggling with the length of the embedded window. My Tweets seem to extend beyond the page boundaries. ...
Sorry for the vague title, I'm struggling to explain my issue clearly, so let me elaborate. I am using flexbox to create a 3-column layout and want the middle column to expand when either or both of the side panels are collapsed. Here is a screenshot ...
As a new JavaScript beginner, I have experimented with various approaches in an attempt to create a website that features a digital piano experience without the actual instrument. My goal is to develop a platform where pressing multiple keys together will ...
I am facing an issue with my website footer and its CSS styling. #footer { position: absolute; bottom: 0; width: 100%; height:8rem; } The main goal is to keep the footer at the bottom of the page, regardless of the amount of content on th ...
I'm currently struggling with applying CSS successfully to components imported from an npm library. My main challenge seems to be my use of css-loader in the react starter kit (https://github.com/kriasoft/react-starter-kit) without a full understandin ...
I want to create a unique login page using bootstrap. My goal is to have an image on the left side and a form on the right side of the page. I need it to be responsive so that the image will disappear on smaller screens to prevent distortion. However, I a ...