Codekit encountered an issue with Libsass: Invalid CSS error detected

Hey there, I'm diving into the world of SASS and coding, so I'd appreciate constructive feedback as I'm self-taught.

After compiling my html, css, and sass files using Codekit, I keep encountering this error:

Libsass: Error: Invalid CSS after "...blic domain) */": expected 1 selector or at-rule, was "*/ {}"
    on line 3 of Users/MargaretBowen/Desktop/Code/better code/_reset.sass
>>    License: none (public domain) */
-----------------------------------^

To improve my skills, I've been following a tutorial (https://www.youtube.com/watch?v=gDsPH0Zt8Qw#t=3.356712) and tried implementing a reset code from GitHub (https://gist.github.com/hcatlin/1027867) to avoid issues with Codekit!

It seems like something isn't quite working as intended. In my sass file, I have only one line '@import reset' while my _reset.sass file contains the code from GitHub. Even restarting the server in Codekit didn't resolve the issue.

// Imports
@import reset

Answer №1

Hooray, I've solved the mystery! Turns out, my problem was caused by using a .sass extension instead of .scss for my _reset file. Such a simple mistake!

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

Switching from HTML to BBCode during the editing process

My issue lies in converting BBCode to HTML and then editing the code on a page with AJAX. When editing in a <textarea>, the HTML tags show up instead of the original BBCode. For instance, if I submit [b]bold text[/b] and save it to my database, the ...

Enhancing visual appeal with Carousel Slider images

I am facing an issue with the Carousel Slider. I added an image to index.php, but when I tried adding a second image, it appeared just below the first one in the carousel. Click here for the first image Click here for the second image Slider.php < ...

Arranging Bootstrap 4 columns in a vertical stack

My HTML code is as follows: <html> <head> <title>Title</title> <meta charset="utf-8"> <meta name="description" content="description"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <li ...

Sending data from a form to a PHP script via a variable transfer

i have a form structured like this: <form action="del.php" method="post" enctype="multipart/form-data"> Number of field to display:<input type="text" name="limit" /><br /><br /> Top category: <select name="topcat"> <opt ...

Is there a way to make my extended list bump up the rest of the elements on the page

I've created a section designed to function as a product filter in the future. Currently, when the parent option is clicked, the list expands to show the sub-options. However, I'm facing an issue where I need the parent option and styled span to ...

Issues with SVG Image Mask in Firefox and IE: How to Fix Them

Creating a mask with a PNG (black circle, transparent background) and using -webkit-mask-image:url(images/mask.png) has been easy for browsers like Chrome. However, I've been encountering significant difficulties in getting the mask to display properl ...

Implement Vue.js functionality to dynamically add the 'active' class upon clicking an element, while also removing

Is it possible to create an active link on a div element? Check out this example to see how you can achieve that in your code: http://jsfiddle.net/fiddleyetu/9ff79/ $(function() { $( 'ul.nav li' ).on( 'click', function() { $ ...

Implementing Dynamic Parent Node Manipulation with Button Clicks in JavaScript

I am currently working on dynamically creating an input field using the append child method along with add and delete buttons to form a tree-like structure. The goal is to be able to create child nodes with add and delete buttons upon clicking the add butt ...

col-md-4 overlapping on smaller screens

I have a contact section on my website that contains columns. I used col-md-4 as the site is divided into 12 columns, but on mobile devices, they stack on top of each other. How are you today? https://i.sstatic.net/CdKAI.png And I'm trying to keep ...

Adjusting HTML5 drag height while resizing the window

Code conundrum: var dragHeight = window.innerHeight - parseInt(jQuery("#drag_area").css("margin-top")) - 5;. It sets the drag height based on browser size, but there's a glitch. If I start with a non-maximized browser and then maximize it, the drag he ...

Name of element is not being transmitted along with form data through POST method

I am struggling to send my modal title as post data, even though I have assigned a name attribute to the element. The elements in the modal body are submitting correctly, but not the one with the name "editModalTitle" that I'm trying to submit. HTML: ...

Looking to crop a canvas without changing its dimensions using jQuery

I'm currently working on a project that involves overlaying two images; one uploaded by the user and the other a default image. However, I am facing an issue when the uploaded image is a rectangle instead of a square, causing the canvas to resize it. ...

How to design a trapezium shape using CSS and HTML

While there are many tutorials available for creating Trapezoids with CSS3, I am interested in making a four-sided shape where none of the sides are parallel (trapezium), similar to the one shown in the image below. Can this be achieved? ...

JavaScript Function to Retrieve URL Parameter in PHPIn this tutorial

I'm currently working on an HTML5 game where each level has its own dedicated HTML page. The results of each level are saved in a JavaScript variable. My question is, how can I pass this information to the next page using the URL? I was considering ...

Content is pushed by a scrolling drop down menu

I had a drop-down menu that was functioning well. However, when I made changes to allow scrolling for too many items, it started behaving differently. The drop-down without scrolling doesn't move down, but the one with scrolling does. JS var maxHei ...

Hover over a DOM element to highlight it, similar to the functionality of the inspect tool

Our website features a bookmarklet that triggers an inspect-like highlighter when a user clicks a button. We are aiming for this functionality to be compatible across different browsers. To achieve this, we must be able to detect the DOM element during mo ...

Notification during image loading

I have successfully integrated the Nivo slider on my website, however, I am encountering a minor issue. Whenever the images are loading, it causes the footer to shift upwards which affects the overall look of the site. Is there a simple solution to add a m ...

React-select is failing to align properly with flexbox styling

I'm currently working on customizing my navbar to display both react-selects in a single row. I initially had everything running smoothly with the traditional vanilla select, but integrating the react-select caused my styling to break. Navbar.js impo ...

CSS - Help! Seeing different results on Internet Explorer

I'm currently handling an OSCommerce website, and I'm trying to figure out why this issue is occurring. You can view the website at this link: The layout looks completely different on Internet Explorer, and I'm puzzled as everything should ...

Serving both HTML and JSON responses concurrently using PHP

Consider a scenario where a webpage contains elements generated in HTML directly from the server backend and others generated through JavaScript with data sourced from JSON. Upon initially loading the page, the HTML layout and its elements are delivered in ...