What are the steps I should take to convert this code to Sass?


$table_1 
  tr:nth-child(odd) td:nth-child(even)
  $table_1 
    tr:nth-child(even) td:nth-child(odd)
      background: #ccc
      background: -moz-linear-gradient(top, #ccc, #eee)
      background: -webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee))
      box-shadow: inset 0 0 10px rgba(0,0,0,.4)
      -moz-box-shadow: inset 0 0 10px rgba(0,0,0,.4)
      -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.4)

I am attempting to convert this code into Sass format, removing semi-colons and ensuring compatibility with Compass.

However, I encounter an error message stating "Properties are only allowed within rules, directives, mixin includes, or other properties."

As a result, the code fails to compile properly.

csssasscompass

Answer №1

For a valuable resource on SASS nesting, check out this guide: http://sass-lang.com/guide#topic-3

#table_1 
  tr:nth-child(odd)
    tr:nth-child(even)
      width: 100%
  tr:nth-child(even)
    tr:nth-child(odd)
      width: 100%

This code snippet should yield the following output:

#table_1 tr:nth-child(odd) tr:nth-child(even) {
  width: 100%;
}

#table_1 tr:nth-child(even) tr:nth-child(odd) {
  width: 100%;
}

To test this code, you can use tools like SassMeister:

UPDATE:

Introduce some mixins for background and border radius functionalities:

=bg($start, $end)
  background: $start
  background: -moz-linear-gradient(top, $start, $end)
  background: -webkit-gradient(linear,0 0, 0 100%, from($start), to($end))
=shadow($distance, $opacity)
  box-shadow: inset 0 0 $distance rgba(0,0,0,$opacity)
  -moz-box-shadow: inset 0 0 $distance rgba(0,0,0,$opacity)
  -webkit-box-shadow: inset 0 0 $distance rgba(0,0,0,$opacity)

#table_1
  tr:nth-child(odd)
    tr:nth-child(even)
      +bg(#ccc,#eee)
      +shadow(10px,.4)
  tr:nth-child(even)
    tr:nth-child(odd)
      +bg(#ccc,#eee)
      +shadow(10px,.4)

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

When using the selector in Angular2, it only displays the message "loading..."

After setting up my index.html file, I have the following code: <body> <my-app>Loading...</my-app> </body> In my app.component, I have linked to a templateUrl that is supposed to display login information. The HTML should incl ...

htmlcssangularindexingcss-selectors

``After resizing the window height, the overlay is not expanding to fill the entire

Check out my CSS and HTML code snippets below: .overlay_ { position: absolute; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.9); z-index: 9999; } Html <body> <div class="overlay_"></div> </bo ...

htmlcss

I am encountering an issue where my buttons in my React application are not redirecting to the correct pages as intended. This problem is occurring as I am relatively new to

When I click on the Home option in the navbar, it does not redirect to the Textform component. Likewise, clicking on About in the navbar fails to take me to the about us page. Interestingly, manually adding "localhost:3000" followed by "/about" to the URL ...

javascripthtmlcssreactjs

I've encountered an issue with adjusting certain property values for an SVG component within my React project

I'm experiencing an issue where the pointer property is working, but the fill property isn't having any effect. When I inspect the elements in the browser console, I can manually change the element.style to affect the styling of the SVG component ...

cssreactjssvg

Using JQuery to toggle a fixed div at the bottom causes all other divs to shift upwards

I'm currently working on a chat feature using node JS, and while the functionality is perfect, I've run into an issue with the CSS aspect of it. The problem arises when we have multiple tabs and clicking on just one causes all the tabs to move u ...

phpjqueryhtmlcssnode.js

I am having trouble getting my bootstrap codes to run on my Django website. Can anyone help me figure

Hey there! Struggling with incorporating bootstrap into my django website. I've added the bootstrap link in the HTML page and inserted the navbar code in the body section, but upon running the server, the website remains unchanged! What could be ca ...

pythonhtmlcssdjangobootstrap-5

A Tiny Bootstrap Modal Nestled Within a Massive Bootstrap Modal

My challenge is to include a modal within another modal, but the height of the first modal is much greater than that of the second one. This causes an issue where the second modal can be scrolled below it and end up scrolling on the first modal's cont ...

javascriptjqueryhtmlcsstwitter-bootstrap

Building a tag cloud with only HTML5 and CSS3

I am looking to generate a word cloud similar to the one shown in this image : click here for reference Is there a way to create a tag cloud without relying on JavaScript? Using only HTML5 and CSS3. Appreciate any guidance. Does anyone have a solution fo ...

htmlcsstagscloud

Unable to get Flexbox 'align-items: center' to work on Chrome beta browser

In the scenario presented below, all modern web browsers that support flexbox display the page as intended. Check out the jsfiddle example here. Thanks to the align-items: center; property, the three colored blocks are evenly spaced within the section el ...

htmlcssgoogle-chromeflexbox

React Div Element Not Extending to Web Page Margin

creating white space between the green div and both the top and sides of the screen This is my index page export default function Home() { return( <div className = {stylesMain.bodyDiv}> <div>home</div> &l ...

htmlcssreactjsreact-nativeweb-testing

Struggling with implementing a grid layout using CSS

I am currently facing an issue with my code where I am attempting to set up a wrapper element as a grid. However, upon inspecting the page, I am receiving notifications that my inputs for display, grid-template-columns, and grid-template-area are considere ...

csscss-grid

Troubleshooting: Why is my JPG Image not displaying in React JS?

I've encountered an issue while trying to set a background image for a div. Some images display correctly, while others do not. I attempted various methods such as directly specifying the image path in the background-image property in CSS, importing ...

cssreactjs

Display a <div> based on the database query for the portal field

I am new to JavaScript and have been successfully using the code below with a checkbox. function showAddress() { var objectAddress = document.getElementById("objektadresse"); var addressToShow = document.getElementById("adresseeinblenden"); addr ...

javascriptjqueryhtmlcss

Attempting to arrange a line consisting of four individual cells

I am facing an issue while trying to create a row with 4 cells and I can't figure out why it's not working. The structure involves a parent element called row with 4 child elements. <div className='row'> <div ...

csssassscss-mixins

Dimensions of div tags that are nested within each other

I have a container div that contains three inner divs, each with a width of 33%. When they don't have borders, they align perfectly in line. However, when I add a 1px border to each of the inner divs, it causes them to go out of alignment and pushes ...

javascripthtmlcssnested

Tips for centering the second content within a div block

<div style="height: 100%; background: red"> <div style="height: 100px; background: green"> </div> <div style="background: blue;"> <h1>Content</h1> </div> </di ...

htmlcss

Place a downward arrow on top of a colored box or backdrop image

I am currently in the process of designing a downward arrow for the bottom of a full-width div. The arrow works well when transitioning from a colored section to a white one, as seen below: https://i.sstatic.net/VsVW7.png However, I am encountering issue ...

htmlcss

How to access the CSS and JS files in the vendor folder using linemanjs

Currently, I am in the process of developing a web application utilizing linemanjs. However, I have encountered an issue where the vendor css and js files are not being referenced correctly when explicitly included. I would appreciate any guidance on what ...

javascripthtmlcssnode.jslinemanjs

When I use .fadeToggle, my div transitions smoothly between visible and hidden states

Looking to create a sleek navigation menu that showcases a colored square when hovered over? I'm currently experiencing an issue where the squares are not aligning correctly with the items being hovered. Switching the position to absolute would likely ...

javascriptjqueryhtmlcsshover

Creating a div background that is transparent within a Bootstrap modal

Here is the HTML (Bootstrap) code I have: <div modal="showModal" close="cancel()"> <div class="modal-header text-center"> <h2>Members who shortlisted you </h2> </div> <div class="modal-body"> ...

javascriptjqueryhtmlcsstwitter-bootstrap